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.)
(是的，我意识到从技术和终端用户的角度来看，这真的不重要。)
12 个解决方案
#1
68
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图像的存在。
#2
15
I think that depends on HOW you are using the attribute. If you're styling multiple images within a list or table so that they lay out correctly, then put the width/height in your CSS to 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 content and 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中，以记住要删除。
#3
12
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…)浏览器将显示带有alt的框架(使用提供的w和h)。
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.
这在电脑上尤其令人讨厌，但仍然相当恼人，因为你要点击一个链接，然后页面突然向下移动，而你却意外地点击了错误的链接。
#4
7
I'd say CSS.
我想说的CSS。
HTML is about content,
CSS is about presentation.
HTML是内容，CSS是表示。
#5
5
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中似乎否定了不使用它们的理由。
#6
4
I'd say HTML.
我想说的HTML。
The width and height attributes are used to stop the page from loading and growing in a disjointed manner.
宽度和高度属性用于阻止页面以无序的方式加载和增长。
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没有使用宽度和高度属性来保留图像空间，但是我很惊讶他们没有更新它。
#7
3
Per the <img> article at MDN, the HTML attributes indicate the intrinsic dimensions 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上的
文章，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 display size.
如果你想要显示这些尺寸的图像，任务完成了。否则，您还必须添加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的width属性有什么区别?
#8
2
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块中定义)。
#9
1
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中指定宽度或高度，尽管这可能有助于页面呈现得更快。
#10
0
I could be wrong, and if I am, please, someone correct me... but I think Google and some other search engines index the content of alt tags.
我可能是错的，如果我是，请纠正我……但是我认为谷歌和其他一些搜索引擎索引了alt标记的内容。
Sometimes, for design aesthetics, I have created an image of text created with fonts that are not available via HTML, but are available to Photoshop, Illustrator, etc. If you have a precise typographic impression you want to create which involves textual information, the only way to get that across is to create an image of the typographical text and put the actual text in an alt tag for the sake of search engines.
有时候,设计美学,我创建了一个图像的文本字体不可以通过创建HTML,但可用Photoshop,Illustrator,等等。如果你有一个精确的排版印象你想创建包括文本信息,唯一的办法是创建一个图像的印刷文本,把实际的文本在一个alt标记为了搜索引擎。
If someone has a better solution, I'd love to hear it.
如果有人有更好的解决办法，我很乐意听。
Meanwhile, tho, given a need for what I have described, it would seem reasonable to me to vote for HTML inline height/width parameters, along with alt text descriptions, as a matter of standard practice. It is, in fact content, not just design in such cases -- and such cases really should not be exceptions to the rule until CSS and search engines come up with an better solution.
与此同时，由于需要我所描述的内容，作为标准实践，tho对HTML内联高度/宽度参数以及alt文本描述进行投票似乎是合理的。事实上，在这种情况下，它不仅仅是设计内容——在CSS和搜索引擎提出更好的解决方案之前，这种情况真的不应该是规则的例外。
#11
0
How do email clients deal with img constraints as attributes vs inline styles?
电子邮件客户端如何处理img约束作为属性与内联样式?
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >
https://www.emailonacid.com/app/acidtest/display/summary/FAPNOuxiTtQN72OswSOfnQWbfnZswUAHhGCPbuzh4hk9a/shared
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >
https://www.emailonacid.com/app/acidtest/display/summary/CbRqMbMtCbVdpggthGRn5QPWeidpIo8aHaa6kl8TCqaD6/shared
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >
https://www.emailonacid.com/app/acidtest/display/summary/CemSW48eKxJBuQqCIO8oh8y77muOKfPvBsYsDjyswhi8g/shared
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >
https://www.emailonacid.com/app/acidtest/display/summary/vjAVkYnlD3TQyrfIDj4NGvoneeDc8hakzLaHdMsETaGSE/shared
So, img size constraints should not be set with inline styles, primarily because Outlook 2007/2010/2013 does not honor them.
因此，img大小约束不应该用内联样式设置，主要是因为Outlook 20072010/2013不支持内联样式。
What happens when both attributes and inline styles are in use? Some clients use one or the other, and some use the inline width in combination with the attribute height:
当同时使用属性和内联样式时会发生什么?有些客户使用其中一个或另一个，有些客户使用内联宽度与属性高度结合:
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >
https://www.emailonacid.com/app/acidtest/display/summary/6JdKm63qDVDxHuaJE2lZhV4NAOq8qxG4eSQ7VWRUALWLP/shared
tldr: Use img attributes for html email.
html邮件使用img属性。
#12
0
I would go wi(d)th W3C Recommendation.
我会推荐wi(d) W3C推荐标准。
That is, defining the width and height as an attribute like this:<img src="example.png" width="150" height="150" alt="example image">
也就是说，将宽度和高度定义为这样的属性:
http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
# the-img-element http://www.w3.org/tr/html5/embedded -内容- 0. - html
#1
68
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图像的存在。
#2
15
I think that depends on HOW you are using the attribute. If you're styling multiple images within a list or table so that they lay out correctly, then put the width/height in your CSS to 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 content and 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中，以记住要删除。
#3
12
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…)浏览器将显示带有alt的框架(使用提供的w和h)。
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.
这在电脑上尤其令人讨厌，但仍然相当恼人，因为你要点击一个链接，然后页面突然向下移动，而你却意外地点击了错误的链接。
#4
7
I'd say CSS.
我想说的CSS。
HTML is about content,
CSS is about presentation.
HTML是内容，CSS是表示。
#5
5
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中似乎否定了不使用它们的理由。
#6
4
I'd say HTML.
我想说的HTML。
The width and height attributes are used to stop the page from loading and growing in a disjointed manner.
宽度和高度属性用于阻止页面以无序的方式加载和增长。
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没有使用宽度和高度属性来保留图像空间，但是我很惊讶他们没有更新它。
#7
3
Per the <img> article at MDN, the HTML attributes indicate the intrinsic dimensions 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上的文章，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 display size.
如果你想要显示这些尺寸的图像，任务完成了。否则，您还必须添加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的width属性有什么区别?
#8
2
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块中定义)。
#9
1
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中指定宽度或高度，尽管这可能有助于页面呈现得更快。
#10
0
I could be wrong, and if I am, please, someone correct me... but I think Google and some other search engines index the content of alt tags.
我可能是错的，如果我是，请纠正我……但是我认为谷歌和其他一些搜索引擎索引了alt标记的内容。
Sometimes, for design aesthetics, I have created an image of text created with fonts that are not available via HTML, but are available to Photoshop, Illustrator, etc. If you have a precise typographic impression you want to create which involves textual information, the only way to get that across is to create an image of the typographical text and put the actual text in an alt tag for the sake of search engines.
有时候,设计美学,我创建了一个图像的文本字体不可以通过创建HTML,但可用Photoshop,Illustrator,等等。如果你有一个精确的排版印象你想创建包括文本信息,唯一的办法是创建一个图像的印刷文本,把实际的文本在一个alt标记为了搜索引擎。
If someone has a better solution, I'd love to hear it.
如果有人有更好的解决办法，我很乐意听。
Meanwhile, tho, given a need for what I have described, it would seem reasonable to me to vote for HTML inline height/width parameters, along with alt text descriptions, as a matter of standard practice. It is, in fact content, not just design in such cases -- and such cases really should not be exceptions to the rule until CSS and search engines come up with an better solution.
与此同时，由于需要我所描述的内容，作为标准实践，tho对HTML内联高度/宽度参数以及alt文本描述进行投票似乎是合理的。事实上，在这种情况下，它不仅仅是设计内容——在CSS和搜索引擎提出更好的解决方案之前，这种情况真的不应该是规则的例外。
#11
0
How do email clients deal with img constraints as attributes vs inline styles?
电子邮件客户端如何处理img约束作为属性与内联样式?
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >
https://www.emailonacid.com/app/acidtest/display/summary/FAPNOuxiTtQN72OswSOfnQWbfnZswUAHhGCPbuzh4hk9a/shared
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >
https://www.emailonacid.com/app/acidtest/display/summary/CbRqMbMtCbVdpggthGRn5QPWeidpIo8aHaa6kl8TCqaD6/shared
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >
https://www.emailonacid.com/app/acidtest/display/summary/CemSW48eKxJBuQqCIO8oh8y77muOKfPvBsYsDjyswhi8g/shared
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >
https://www.emailonacid.com/app/acidtest/display/summary/vjAVkYnlD3TQyrfIDj4NGvoneeDc8hakzLaHdMsETaGSE/shared
So, img size constraints should not be set with inline styles, primarily because Outlook 2007/2010/2013 does not honor them.
因此，img大小约束不应该用内联样式设置，主要是因为Outlook 20072010/2013不支持内联样式。
What happens when both attributes and inline styles are in use? Some clients use one or the other, and some use the inline width in combination with the attribute height:
当同时使用属性和内联样式时会发生什么?有些客户使用其中一个或另一个，有些客户使用内联宽度与属性高度结合:
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >
https://www.emailonacid.com/app/acidtest/display/summary/6JdKm63qDVDxHuaJE2lZhV4NAOq8qxG4eSQ7VWRUALWLP/shared
tldr: Use img attributes for html email.
html邮件使用img属性。
#12
0
I would go wi(d)th W3C Recommendation.
我会推荐wi(d) W3C推荐标准。
That is, defining the width and height as an attribute like this:<img src="example.png" width="150" height="150" alt="example image">
也就是说，将宽度和高度定义为这样的属性:
http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
# the-img-element http://www.w3.org/tr/html5/embedded -内容- 0. - html