一尘不染

图片尺寸应在img标签的height / width属性中还是在CSS中定义?

css

img标记widthheight属性中定义图像大小是否是更好的编码方法?

<img src="images/academia_vs_business.png" width="740" height="382" alt="" />

还是CSS样式的宽度/高度?

<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />

或两者?

<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />

阅读 815

收藏
2020-05-16

共1个答案

一尘不染

我将在这里违背原则,指出将内容与布局分离的原理(这将证明使用CSS提出的答案是正确的)并不总是适用于图像的高度和宽度。

每个图像都有一个固有的原始高度和宽度,可以从图像数据中得出。在内容与布局的框架中,我会说,派生的高度和宽度信息是内容,而不是布局,因此应将其呈现为HTML作为元素属性。

这很像alt文本,也可以说是从图像派生的。这也支持这样的想法,即任意用户代理(例如语音浏览器)都应具有该信息以便将其与用户相关联。至少可以证明宽高比是有用的(“图像的宽度为15,高度为200”)。这样的用户代理不一定要处理任何CSS。

规范说,widthandheight属性还可以用于覆盖实际图像文件中传达的高度和宽度。我不建议将它们用于此目的。要覆盖高度和宽度,我认为CSS(内联,嵌入式或外部)是最好的方法。

因此,根据您要执行的操作,可以指定一个和/或另一个。我认为理想情况下,原始高度和宽度始终应指定为HTML元素属性,而样式信息则可以选择在CSS中传达。

2020-05-16