当图片未找到时，图片的高度和宽度

Question

我有以下代码：

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

我试图精确地布局一个页面，即使图片未被找到，我也希望Alt文本占据给定的高度和宽度。

1）这是HTML/CSS的工作方式吗？

2）如果不是，由于我从PHP生成HTML，我能做些什么来实现我的目标？例如，如果我检查不存在并且生成所需大小的Fieldset，其中包含我的Alt文本，是否可以工作？

- Mawg says reinstate Monica

Answer 1

你的第一个问题的答案是肯定的。Alt属性是为了SEO目的，它的表现就像你所看到的。

虽然有额外的开销，但是有一个函数file_exists()可以检查图像是否存在。

如果该函数返回false而不是回显图像，只需回显"<p>Can't find image (http://localhost/images/curry.jpg)</p>" 并在包装div中添加一个样式属性，指定所需的宽度和高度。

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

- lock

---

说实话，您可以轻松地将 <img> 标签样式设置为 display:block 或 display:inline-block 并将宽度和高度应用于它。只是默认的样式是 inline，因此当它回退到非替换元素时，宽度/高度会被忽略。 - Boris Zbarsky

Answer 2

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

至于“Alt文本”，您能否展示一下您需要什么样的小屏幕截图？我不太明白您所说的占用给定大小的意思。

- moskovich

---

谢谢。我的意思是我想让alt文本“无法找到图像（http://localhost/images/curry.jpg）”占据242 X 300像素的区域。 - Mawg says reinstate Monica

Answer 3

当浏览器找不到图像时，会根据浏览器的不同而有所不同。在几个浏览器中查看一下，看看会发生什么：

http://jsfiddle.net/nhHyC/

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

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

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

我没有检查IE，因为那些机器藏在我的测试实验室的衣柜里 :)

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

alt属性是为无法显示图像（例如屏幕阅读器和纯文本设备）的用户代理而设计的：

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

- mu is too short

---

就此而言，Firefox的行为也取决于怪癖模式与标准模式以及其他一些因素... - Boris Zbarsky

@Boris：我有点惊讶Firefox的表现不够明智；另一方面，我在jsfiddle.net上检查东西，所以我对doctype没有完全控制。我认为Opera和Chrome的行为最明智，但现实与感性无关。 - mu is too short

哦，Firefox的行为完全合理。在标准模式下，如果图像无法加载，则会像 <span> 一样处理，并显示 alt 文本。然后，布局仅取决于应用于其上的样式；这使页面作者可以完全控制他们希望发生的确切情况。如果你的 <img> 是 display:inline，那么它当然会忽略width / height。 如果它是 display:inline-block，则会使用给定的大小。你想要哪一个完全取决于你；两者都有用例。 - Boris Zbarsky

@Boris：你有关于<img>标签默认的display值的官方参考资料吗？我认为它是inline-block而不是inline，但我以前也犯过错，如果这次我错了，我很乐意接受纠正。 - mu is too short

http://www.w3.org/TR/CSS21/visuren.html#display-prop 表示“初始值：inline”。因此，除非通过某些样式表（作者、用户或用户代理）进行样式化，否则所有元素的显示均为“inline”。典型 UA 的默认样式表不会更改 <img> 元素的显示值。实际上，您可以通过创建一个包含 <img> 元素的页面，并查看 getComputedStyle 返回的 display 值来在任何浏览器中检查此功能。 - Boris Zbarsky