未找到图像时的图像高度和宽度

Question

我有以下代码：

<div>
  <img src="../images/curry.jpg" height="242" width="300" 
       alt="Can't find image (http://localhost/images/curry.jpg)">
</div>

我正在尝试精确地布置页面，因此，即使找不到图像，我也希望Alt文本占据给定的高度＆amp;宽度。

1）现在HTML / CSS是如何工作的？

2）如果没有，因为我从PHP生成HTML，有什么办法可以实现我想要的吗？例如，如果我检查不存在而不是IMG Tage，是否会生成所需大小的Fieldset，包含我的Alt文本？

Answer 1

第一个问题的答案是肯定的。 Alt属性用于SEO目的，其行为与您所看到的一样。

虽然我必须警告你额外的开销，但是有可能 有一个函数file_exists()来检查图像是否存在。

如果该函数返回false而不是回显图像只是echo “<p>Can't find image (http://localhost/images/curry.jpg)</p>” 并向包装div添加一个样式属性，用于表示所需的宽度和高度

<div style='height: 242px;width: 300px'>

Answer 2

如果您使用PHP生成页面，则只需修复div的宽度/高度即可。

至于“替代文字”你能展示一个你想要的小屏幕截图吗？我不明白你占用给定大小的意思。

Answer 3

当浏览器找不到图像时会发生什么情况取决于浏览器。只需在几个浏览器中查看一下，看看会发生什么：

http://jsfiddle.net/nhHyC/

Safari使用指定的尺寸，但在该空间中显示“损坏的图像”图标。

Firefox 4使用alt文字但忽略尺寸。

Opera和Chrome使用指定的尺寸并在该空间中显示alt文字。

我没有费心去检查IE，因为那些机器隐藏在我的测试实验室的柜子里：）

如果您需要特定的行为，则必须使用包含<div> display:inline-block和所需尺寸的包装器自行完成。如果要覆盖所有浏览器，安排适当的内容将会更加棘手。

alt attribute适用于无法显示图像的用户代理（例如屏幕阅读器和纯文本设备）：

  

对于无法显示图像，表单或小程序的用户代理，此属性指定备用文本。