HTML5 img标签尺寸

Question

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

Answer 1

在这种情况下，它确实是正确的方式，实际上没有错误的方法来指定图像标记本身的宽度和高度。特别是在网站的渲染阶段，如果指定了尺寸，那么浏览器不需要尝试计算图像的大小，这样做的性能会有小幅提升。

From the spec：

“作者要求：width和height属性上IMG，iframe中，嵌入，对象，视频和，当它们的类型属性是在图像按钮状态，可以将指定的输入元件，得到元素的视觉内容的尺寸“。

Answer 2

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

Answer 3

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

使用情况取决于个人喜好或政治（企业）决策。

我自己认为最好把它放在css中。

Answer 4

你应该总是喜欢CSS到HTML属性。 HTML是为了定义结构，而CSS告诉浏览器如何呈现它。

Answer 5

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

我倾向于在正确的width和height属性中指定它们，因为它们与使用的src密切相关。把它们放在样式表中是没有意义的。

从规范（重点煤矿）：上IMG，IFRAME，....和可以指定给的可视内容的尺寸的输入元件

宽度和高度属性元素（宽度和高度，分别相对于输出媒体的名义方向），CSS像素。属性（如果指定）必须具有有效的非负整数值。

Answer 6

对于一次使用的单个独特内容图像，没有理由不使用内联width/height属性。即使在严格的情况下，它们仍然有效。

情形之一的CSS规则会更好：

• 有一些图像的情况下，或多个图像大小相同的。一条规则可以让你减少你必须写的标记数量;

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

• 我可能要使用更复杂的尺寸规则，而不是width/height属性允许，如% -sizing或max-width。