应该在img标签的height / width属性中定义图像大小还是在CSS中定义图像大小？ [英] Should image size be defined in the img tag height/width attributes or in CSS?

问题描述

在 img 标记的宽度和中定义图片大小更好的编码实践> height 属性？

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

或者在带宽度/高度的CSS样式中？

Or in the CSS style with width/height?

<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="" />

推荐答案

说明将内容与布局分离的原理（这将证明使用CSS的答案是合理的）并不总是适用于图像高度和宽度。

I'm going to go against the grain here and state that the principle of separating content from layout (which would justify the answers that suggest using CSS) does not always apply to image height and width.

每个图片都具有可从图片数据导出的原生高度和宽度。在内容与布局的框架中，我会说，导出的高度和宽度信息是内容，而不是布局，因此应该作为元素属性呈现为HTML。

Each image has an innate, original height and width that can be derived from the image data. In the framework of content vs layout, I would say that this derived height and width information is content, not layout, and should therefore be rendered as HTML as element attributes.

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

This is much like the alt text, which can also be said to be derived from the image. This also supports the idea that an arbitrary user agent (e.g. a speech browser) should have that information in order to relate it to the user. At the least, the aspect ratio could prove useful ("image has a width of 15 and a height of 200"). Such user agents wouldn't necessarily process any CSS.

规范说 width 和 height 属性也可以用于覆盖实际图像文件中传达的高度和宽度。我不建议他们使用这个。要覆盖高度和宽度，我相信CSS（内联，嵌入式或外部）是最好的方法。

The spec says that the width and height attributes can also be used to override the height and width conveyed in the actual image file. I am not suggesting they be used for this. To override height and width, I believe CSS (inline, embedded or external) is the best approach.

因此，根据你想做什么， /或另一个。我认为理想情况下，原始的高度和宽度将始终指定为HTML元素属性，而样式信息应该可选地在CSS中传送。

So depending on what you want to do, you would specify one and/or the other. I think ideally, the original height and width would always be specified as HTML element attributes, while styling information should optionally be conveyed in CSS.

这篇关于应该在img标签的height / width属性中定义图像大小还是在CSS中定义图像大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！