响应式的虚拟/占位图像

Question

3 浏览2023年5月10日

匿名的 2023年5月10日

0 Comments

在HTML中，是否可能伪造一个行为像真实图片但实际上不存在的空图片？

例如，我有一个响应式的列，其中应该有一个200x150像素的图片（因为它是响应式的，所以会被样式化为width: 100%; height: auto;）... 但是如果没有图片，应该放置一个占位符，它可以伪造一个真实的200x150像素大小的图片。

我尝试了像下面这样的图片标签，但它不起作用，因为有height: auto。关于奇怪的src，请参考这里。

是否可能使用PHP生成一个空的PNG图片？

编辑：有些人提到了placehold.it这个服务。基本上，这正是我需要的（在大多数情况下绝对合适），但因为这是一个WordPress插件，它也应该在没有互联网连接的情况下运行。最好是一个没有外部服务的解决方案。

0

匿名的 · Answer 1 · 2023-08-02T07:56:55+00:00

Responsive fake/placeholder image问题的出现原因是，在响应式环境中，1x1像素大小的图片与200x150像素大小的图片的行为不同。

解决方法是使用一个透明的1x1像素的png文件作为占位符图片。可以通过使用php来提供图片，代码如下：

如果需要从头开始创建一个图片，需要使用GD库。代码如下：

$my_img = imagecreate(200, 150);
imagepng($my_img);
imagedestroy($my_img);

然而，问题在于1x1像素大小的图片在响应式环境中的行为与200x150像素大小的图片不同。

匿名的 · Answer 2 · 2023-09-23T08:37:42+00:00

Responsive fake/placeholder image的出现原因是为了在网页中展示图片的占位符。这个问题的解决方法是使用PHP和GD库来创建一个完全透明或填充颜色的图片。下面是解决方法的代码：

还可以使用填充颜色的方式来创建图片：

使用方法如下：

需要注意的是，尽管这个方法在WordPress安装中可以工作，但是其他人可能使用的是ImageMagick或没有任何图像库，如果要分发此代码，可能需要考虑这些可能性。