HTML5 img标签尺寸

Question

定义<img>的宽度和高度的“正确”方式是什么？ 它是通过标签的目录，具有“width”和“height”属性，还是通过CSS img { width:...; height... }更好？

Answer 1

对于使用过一次的单个唯一内容图片，我们没有理由不使用内联width / height属性。它们仍然有效，即使在Strict。

CSS规则会更好：

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

• 图片是布局功能的一部分，而不是内容;一个不同的样式表可能想要调整它的大小;

• 我可能希望使用比width / height属性允许的更复杂的大小调整规则，例如% - 调整大小或max-width。

Answer 2

在这种情况下，它绝对是正确的方法，确实没有错误的方法，指定图像标签本身的宽度和高度。特别是在您网站的呈现阶段，由于浏览器不需要尝试计算图像的大小，因此在此处指定尺寸会有很小的性能提升。

From the spec：

“作者要求：img，iframe，嵌入，对象，视频的宽度和高度属性，当它们的type属性处于Image Button状态时，可以指定输入元素以给出可视内容的维度元素“。

Answer 3

所有元素样式都应该使用CSS完成。在大多数情况下，高度和宽度属性被认为不再有效。这样您就可以将样式和布局与功能分开。它还应该导致更清晰的HTML代码和更小的文件。

Answer 4

两种方式都是“正确的”。

用法取决于个人偏好或政治（企业）决定。

我自己认为把它放在CSS中更好。

Answer 5

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

Answer 6

两种方式都是fine。 width和height属性是可选的。如果未指定，则将使用资源的维度。

我希望在适当的width和height属性中指定它们，因为它们与使用的src密切相关。将它们保存在样式表中是没有意义的。

从规范（强调我的）：

  

img，iframe，....和输入元素的宽度和高度属性可以指定给出元素的可视内容的尺寸（宽度和高度分别相对于输出介质的名义方向），以CSS像素表示。如果指定了属性，则必须具有有效非负整数的值。