Отзывчивый поддельный / заполнитель изображения

Question

Отзывчивый поддельный / заполнитель изображения

Можно ли подделать пустое изображение в html, которое ведет себя как настоящее, но не существует?

Например, у меня есть отзывчивый столбец, в котором должно быть изображение размером 200×150 пикселей (которое получает стиль: width: 100%; height: auto; потому что это отзывчиво) … Но если изображение отсутствует, его следует поместить в качестве заполнителя, который точно соответствует размеру реального изображения размером 200×150 пикселей.

Я попытался тег изображения, как показано ниже, но это не работает из-за этого height: auto, О том странном взгляде на src этот.

<img src="//:0" alt="" width="200" height="150" />

Можно ли создать пустой png с php?

<img src="fake.php?s=200x150" alt="" />

РЕДАКТИРОВАТЬ: Некоторые ребята упомянули сервис placehold.it. По сути, это именно то, что мне нужно (и в большинстве случаев абсолютно адекватно), но поскольку это для плагина WordPress, он также должен работать локально без подключения к интернету. Лучше всего будет решение без внешних сервисов.

4

css html php responsive-images

Решение

Другие решения

Вместо того, чтобы использовать php для показа «поддельного» изображения, почему бы вам не использовать изображение-заполнитель, которое будет прозрачным 1px x 1px png файлом?

Во всяком случае, чтобы ответить на ваш вопрос, вы можете сервер изображений с php:

<?php
//redefine the header
header("Content-type: image/png");
//send the image content
readfile('/path/of/a/png/image.png');
?>

0

Источник

Accepted Answer

Вот решение, которое я придумал (полностью прозрачное изображение такого размера):

<?php

// Image size
$imageWidth = is_numeric( $_GET[ 'w' ] ) ? $_GET[ 'w' ] : 0;
$imageHeight = is_numeric( $_GET[ 'h' ] ) ? $_GET[ 'h' ] : 0;

// Header
header ('Content-Type: image/png');

// Create Image
$image = imagecreatetruecolor( $imageWidth, $imageHeight );
imagesavealpha( $image, true );
$color = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagefill($image, 0, 0, $color);

// Ouput
imagepng( $image );
imagedestroy( $image );

?>

Также было бы возможно заполнить изображение цветом:

<?php

// Image size
$imageWidth = is_numeric( $_GET[ 'w' ] ) ? $_GET[ 'w' ] : 0;
$imageHeight = is_numeric( $_GET[ 'h' ] ) ? $_GET[ 'h' ] : 0;

// Header
header ('Content-Type: image/png');

// Create Image
$image = imagecreatetruecolor( $imageWidth, $imageHeight );
imagesavealpha( $image, true );
$color = imagecolorallocatealpha($image, 180, 180, 180, 0);
imagefill($image, 0, 0, $color);

$text_color = imagecolorallocatealpha( $image, 255, 255, 255, 50 );
imagestring($image, 1, 5, 5,  $imageWidth . ' x ' . $imageHeight, $text_color);

// Ouput
imagepng( $image );
imagedestroy( $image );

?>

Использование будет:

<img src="placeholder.php?w=350&h=250" alt="" />

2