HTML5 img标签尺寸

定义

宽度和高度的更“正确”的方法是什么？

---

它是通过带有“宽度”和“高度”属性的标记的目录，还是通过CSS

img{width:…；height…}

所有元素的样式都应该使用CSS完成。高度和宽度属性在大多数情况下不再有效。这样可以将样式和布局与功能分开。这也会导致更干净的html代码和更小的文件。

这两种方法都是“正确的”

使用取决于个人偏好或政治（企业）决策

---

我自己认为最好将其放在css中。

在这种情况下，在图像标记本身上指定宽度和高度绝对是正确的方法，没有错误的方法。特别是在站点的渲染阶段，如果在其中指定了尺寸，则会有一点性能改进，因为浏览器不需要尝试并计算图像的大小

:

---

“作者要求：img、iframe、embed、object、video上的宽度和高度属性，当其类型属性处于图像按钮状态时，可以指定输入元素以给出元素的视觉内容的尺寸”。

您应该始终更喜欢CSS而不是HTML属性。HTML是用来定义结构的，而CSS则告诉浏览器如何呈现它。

两种方式都是。

width

和

height

属性是可选的。如果未指定，则将使用资源的维度

我更愿意在适当的

width

和

height

属性中指定它们，因为它们与所使用的

src

密切相关。将它们保存在样式表中是没有意义的

根据规范（强调我的）：

img、iframe等上的宽度和高度属性。。。。并且输入元素可以指定为以CSS像素为单位给出元素的视觉内容的尺寸（相对于输出介质的标称方向分别为宽度和高度）。属性（如果指定）的值必须是有效的非负整数

---

对于使用过的单个唯一内容图像，没有理由不使用内联

宽度

/

高度

属性。即使在严格意义上，它们仍然有效

在以下情况下，CSS规则会更好：

• 该图像有多个实例，或多个大小相同的图像。一条规则将允许您减少必须编写的标记量

• 图像是布局特征的一部分，而不是内容；不同的样式表可能需要调整其大小

• 我可能希望使用比

  宽度

  /

  高度

  属性允许的更复杂的大小调整规则，例如

  %

  -大小调整或

  最大宽度

---

计算图像大小可能比解析这两个属性花费的时间要少。从规范中可以看出，这些属性不是必需的，在现代浏览器中，不使用这两个属性很可能不是问题，但对于较旧的浏览器，指定元素的宽度和高度绝对是一个好主意。