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


Image height and width when image not found

我有以下代码:

<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的,我能做些什么来实现我想要的吗?例如,如果我检查不存在,而不是IMG阶段,生成一个所需大小的字段集,包含我的Alt文本,它会起作用吗?

第一个问题的答案是肯定的。Alt属性是为了SEO的目的,并且行为就像你看到的一样。

这是可能的,尽管我必须警告你额外的开销,有一个函数file_exists((来检查图像是否存在。

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

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

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

至于"替换文本",你能显示一个你想要的小屏幕截图吗?我真的不明白你所说的占据给定尺寸是什么意思。

当浏览器找不到图像时会发生什么取决于浏览器。只需在一些浏览器中查看一下,就可以看到会发生什么:

http://jsfiddle.net/nhHyC/

Safari使用指定的尺寸,但在该空间中显示"破碎的图像"图标。

Firefox 4使用alt文本,但忽略维度。

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

我没有检查IE,因为那些机器藏在我测试实验室的壁橱里:(

如果你需要特定的行为,那么你必须自己用一个带有display:inline-block和所需维度的包装器<div>来完成。如果你想覆盖所有的浏览器,那么安排合适的内容会更麻烦。

alt属性适用于无法显示图像的用户代理(如屏幕阅读器和纯文本设备(:

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