HTML宽度/高度属性与img元素上的CSS width/height属性有什么区别？

Question

HTML <img>元素可以具有width/height属性,并且还可以具有CSS width/height属性.

<img src="xxx.img" width="16" height="16"
style="width: 16px; height: 16px"></img>

HTML属性和CSS属性之间的区别是什么？它们是否具有相同的影响？

Answer 1

关于这个主题的热门辩论可以在这里找到:图像标签与CSS的宽度属性

把它们加起来:

声明宽度值和高度值(可能不是图像的原始物理尺寸)或来自css声明(如width:[valueX]; height:[valueY];)的增益是它有助于加速渲染页面.浏览器知道分配页面特定区域的空间:它甚至会在第一次绘制时绘制图像占位符,第一次解析+渲染页面.当一个人没有定义任何宽度和高度时,浏览器必须下载图像,然后找出它的尺寸,分配空间然后重新绘制页面.

在我看来,这似乎是最有益的效果.

Answer 2

它们具有相同的效果.

<img width="100" height="100" /> 已经使用了很长时间,与widht/height属性相同..比如HTML表.

没有你在元素本身或CSS中指定它没有区别,虽然我现在更喜欢使用CSS,所以我可以保持HTML清晰简洁.

这是一个例子http://jsfiddle.net/N2RgB/1/

我使用HTML属性和 CSS属性加载了4次相同的图像,包括比例和非比例.

绝对没有区别.

Answer 3

当标签中使用宽度和高度<img>时：

<img src="xxx.img" width="25" height="25">

那么宽度和高度属性称为表现属性。

当标签中使用宽度和高度<img>时：

<img style="width: 16px; height: 16px">

那么宽度和高度据说是使用内联 CSS 样式定义的

因此，我们可以将标签的宽度和高度定义为表示属性或使用内联 CSS 样式，这两种方式我们都会得到相同的结果。<img>

但是，将宽度和高度定义为表示属性<img>与使用内联 CSS 样式之间的唯一区别是，将宽度和高度定义为表示属性是定义标签宽度和高度的最弱方法，而使用内联 CSS 样式定义宽度和高度是定义标签宽度和高度的最强方法。<img><img>

因此，如果我们以两种方式定义宽度和高度（即作为表示属性并使用内联 CSS 样式），那么使用内联 CSS 样式对宽度和高度的定义将覆盖作为表示属性的宽度和高度的定义

因此，标签上的表现属性<img>基本上是一个好主意，但表现属性也很弱，通常会被内联 CSS 样式覆盖

作为参考，请检查此