Html 图像宽度/高度作为属性还是在 CSS 中？

Image width/height as an attribute or in CSS?

提问by Wayne Kao

What's the "correct" semantic way to specify image height and width? In CSS...

指定图像高度和宽度的“正确”语义方式是什么？在 CSS...

width:15px;

or inline...

或内联...

<img width="15"

?

?

CSS seems like the right place to put visual information. On the other hand, few would argue that image "src" should not be specified as an attribute and the height/width seem as tied to the binary image data as the "src" is.

CSS 似乎是放置视觉信息的正确位置。另一方面，很少有人会争辩说不应将图像“src”指定为属性，并且高度/宽度似乎与“src”一样与二进制图像数据相关。

(Yes, I realize from a technical, end-user perspective this really doesn't matter.)

（是的，我意识到从技术和最终用户的角度来看这真的无关紧要。）

采纳答案by VirtuosiMedia

It should be defined inline. If you are using the img tag, that image should have semantic value to the content, which is why the alt attribute is required for validation.

它应该是内联定义的。如果您使用 img 标签，该图像应该对内容具有语义价值，这就是验证需要 alt 属性的原因。

If the image is to be part of the layout or template, you should use a tag other than the img tag and assign the image as a CSS background to the element. In this case, the image has no semantic meaning and therefore doesn't require the alt attribute. I'm fairly certain that most screen readers would not even know that a CSS image exists.

如果图像是布局或模板的一部分，您应该使用 img 标签以外的标签，并将图像作为 CSS 背景分配给元素。在这种情况下，图像没有语义意义，因此不需要 alt 属性。我相当确定大多数屏幕阅读器甚至不知道 CSS 图像的存在。

回答by muns

I think that depends on HOW you are using the attribute. If you're styling multiple imageswithin a list or table so that they lay out correctly, then put the width/height in your CSSto avoid the need to add another set of tags to every image in the list. Use something like

我认为这取决于您如何使用该属性。如果您在一个列表或表格中设置多个图像的样式，以便它们正确布局，那么将宽度/高度放在您的CSS 中，以避免需要为列表中的每个图像添加另一组标签。使用类似的东西

ul.gallery img: { width:117px; } 

On the other hand,if you are inserting an image into some contentand it needs to be a certain size to make the document flow properly, then put it in the HTML. That way you don't have to muck up the style sheet for each different image in the html. And this way, if you change the content to a different image, of remove the image all together, you don't have remnants of code scattered in your CSS to remember to delete.

另一方面，如果您要在某些内容中插入图像并且需要一定的大小才能使文档正常流动，则将其放入HTML 中。这样您就不必为 html 中的每个不同图像弄乱样式表。这样，如果您将内容更改为不同的图像，或者将图像全部删除，您就不会在 CSS 中留下要记住删除的代码残留。

回答by Matt

The height and width should be included in the HTML. The reason being is that it creates the spacing on the page. If for whatever reason the img fails to load (and you've been a good boy and included an alt..the browser will show that frame (using the w and h provided) with the alt inside.

高度和宽度应包含在 HTML 中。原因是它在页面上创建了间距。如果由于某种原因 img 无法加载（并且您一直是个好孩子并包含了 alt.. 浏览器将显示该框架（使用提供的 w 和 h），其中包含 alt。

The main beneficial reason is preventing the "pop" effect. When a browser loads the page sometimes larger aspects such as img take longer to load, and if you have not specified the w and h in the HTML the browser will temporarily collapse that area thinking its not there. Then, when it finally loads everything pops into proper place.

主要的有益原因是防止“流行”效应。当浏览器加载页面时，有时较大的方面（例如 img）需要更长的时间来加载，如果您没有在 HTML 中指定 w 和 h，浏览器将暂时折叠该区域，认为它不存在。然后，当它最终加载所有东西时，它会弹出到适当的位置。

This is especially annoying but still pretty annoying on a computer because you are going to click on a link and all of a sudden the page shifts down and you've accidentally clicked the wrong link.

这特别烦人，但在计算机上仍然很烦人，因为您要单击一个链接，突然页面向下移动，并且您不小心单击了错误的链接。

回答by stevenvh

I'd say CSS.

我会说CSS。

HTML is about content,
CSS is about presentation.

HTML 是关于内容的，
CSS 是关于展示的。

回答by user2529544

If you look at the HTML5 specification specifying height and width is an option not a requirement. Code is therefore valid with or without these attributes.

如果您查看 HTML5 规范，指定高度和宽度是一个选项而不是要求。因此，无论有没有这些属性，代码都是有效的。

From a practical point of view it's highly desirable to specify them to prevent page reflows as mentioned above. However those suggesting it should be in the html because of this are missing the fact browsers use css when building the page initially. If they didn't the page would have to be redrawn for floated elements, specified padding, margins etc.

从实际的角度来看，非常需要指定它们以防止如上所述的页面重排。然而，那些建议它应该在 html 中的人因为这缺少浏览器在最初构建页面时使用 css 的事实。如果没有，则必须为浮动元素、指定的填充、边距等重新绘制页面。

Whether to specify in html or css is best judged on individual circumstances. A large number of images of the same size would probably be best served with css, a single image with html. That said, if you are specifying other styles for the image (border colour, style or radius, float etc) it would make sense to add width & height to the css.

是在html中指定还是在css中指定最好根据个人情况来判断。大量相同大小的图像可能最好使用 css，即带有 html 的单个图像。也就是说，如果您为图像指定其他样式（边框颜色、样式或半径、浮动等），则向 css 添加宽度和高度是有意义的。

If you specify in html you can only use pixels. If you wanted to specify in say percentage you'd have to use css.

如果在 html 中指定，则只能使用像素。如果您想指定百分比，则必须使用 css。

On a side note, we're encouraged to use ems & % rather than px to help avoid problems when users change browser settings etc, etc yet images are always referred to in pixels. Obviously there are practical reasons for using px for images. However keeping images in px would seem to negate the argument for not using them.

附带说明一下，我们鼓励使用 ems & % 而不是 px 来帮助避免用户更改浏览器设置等时出现的问题，但图像始终以像素为单位。显然，对图像使用 px 是有实际原因的。然而，将图像保存在 px 中似乎否定了不使用它们的论点。

回答by Gras Double

Per the <img> article at MDN, the HTML attributes indicate the intrinsicdimensions of the image, i.e. its real dimensions. That's why, whereas HTML 4 also allowed percentage values, HTML5 only allows px values. (common pitfall: the "px" should not be written)

根据MDN 上的<img> 文章，HTML 属性表示图像的内在尺寸，即它的实际尺寸。这就是为什么 HTML 4 也允许百分比值，而 HTML5 只允许 px 值。（常见的陷阱：不应该写“px”）

If you want to display the image with these dimensions, job done. Otherwise, you also have to add CSS to specify the displaysize.

如果要显示具有这些尺寸的图像，就完成了。否则，您还必须添加 CSS 来指定显示大小。

Of course, it's better to serve the image in the displayed size, to avoid browser resizing, save bandwidth, etc. but that's not always possible.

当然，最好以显示的大小提供图像，以避免浏览器调整大小，节省带宽等，但这并不总是可行的。

See also the answers to this question: What's the difference between HTML's and CSS's width attribute?

另请参阅此问题的答案：HTML 和 CSS 的宽度属性有什么区别？

回答by Christo

I'd say HTML.

我会说HTML。

The width and height attributes are used to stop the page from loading and growing in a disjointed manner.

width 和 height 属性用于阻止页面以脱节的方式加载和增长。

If you have ever been reading a block of text on a page only to have it pushed downward thanks to the late loading image above you know how frustrating it is!
Adding an ID to every image just to specify its width and height would be ludicrous and just almost as messy as adding the two width/height attributes anyway.

如果您曾经阅读过页面上的一段文字，但由于上面的延迟加载图片而将其向下推，您就会知道这有多令人沮丧！
为每个图像添加一个 ID 只是为了指定其宽度和高度将是荒谬的，并且几乎与添加两个宽度/高度属性一样混乱。

The catch is Firefox not using the width and height attributes to reserve the images space however, Im surprised they haven't updated it actually.

问题是 Firefox 没有使用 width 和 height 属性来保留图像空间，但是我很惊讶他们实际上没有更新它。

回答by Jeremy L

If it's part of your site template, I'd place it in the CSS file.

如果它是您网站模板的一部分，我会将它放在 CSS 文件中。

If it's just on one page, it should be inline (or defined in a block of page-specific CSS at the top).

如果它只是在一个页面上，它应该是内联的（或在顶部的页面特定 CSS 块中定义）。

回答by spiral

My take is that it is part of the content,as you mentioned, much as the src attribute is too.

我的看法是，正如您所提到的，它是内容的一部分，就像 src 属性一样。

On the other hand there's no real need to specify width or height in either html or css, though it might help your page render faster.

另一方面，没有真正需要在 html 或 css 中指定宽度或高度，尽管它可能有助于您的页面渲染速度更快。

回答by Darko Atanasov

I would go wi(d)th W3C Recommendation.

我会去 wi(d)th W3C Recommendation。

That is, defining the width and height as an attribute like this:

<img src="example.png" width="150" height="150" alt="example image">

也就是说，将宽度和高度定义为这样的属性：

<img src="example.png" width="150" height="150" alt="example image">

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element