blocks|key|1391600|text|它应该是内联定义的。如果您使用的是img标记，则该图像应该具有内容的语义值，这就是为什么需要使用alt属性进行验证。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391601|如果图像将成为布局或模板的一部分，则应使用img标记以外的其他标记，并将图像指定为元素的CSS背景。在这种情况下，图像没有语义含义，因此不需要alt属性。我相当确定大多数屏幕阅读器甚至不会知道CSS图像的存在。|1391602|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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. 

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.

blocks|key|1606705|text|高度和宽度应该包含在HTML中。原因是它在页面上创建了间距。如果由于某种原因，img无法加载(并且您一直是个好孩子，并且包含在内)，则alt..the浏览器将显示该框架(使用提供的w和h)，并在其中显示alt。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1606706|主要的有益原因是防止了“流行”效应。当浏览器加载页面时，有时较大的方面，如img，加载时间较长，如果您没有在HTML中指定w和h，浏览器将暂时折叠该区域，认为该区域不在那里。然后，当它最终加载时，所有内容都会弹出到适当的位置。|1606707|这在计算机上尤其令人恼火，但在计算机上仍然是相当恼人的，因为你要点击一个链接，突然页面向下移动，你意外地点击了错误的链接。|1606708|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

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. 

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. 

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.

blocks|key|1391655|text|我会说CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391656|HTML是关于内容，|1391657|CSS是关于呈现的。|1391658|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

I'd say CSS. 

HTML is about content, 
CSS is about presentation.

blocks|key|1391778|text|我会说HTML。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391779|width和height属性用于阻止页面以不连续的方式加载和增长。|1391780|如果你曾经阅读过页面上的一块文本，但由于上面的延迟加载图像，它被向下推了下来，你就会知道这是多么令人沮丧！|1391781|仅仅为了指定图像的宽度和高度而向每个图像添加ID将是可笑的，而且几乎和添加两个width/height属性一样混乱。|1391782|问题是Firefox没有使用宽度和高度属性来保留图像空间，然而，我很惊讶他们实际上没有更新它。|1391783|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

I'd say 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.

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.

blocks|key|1391902|text|如果您查看HTML5规范，可以选择指定高度和宽度，而不是必须指定高度和宽度。因此，无论有没有这些属性，代码都是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391903|从实际的角度来看，如上所述，指定它们以防止页面回流是非常可取的。然而，那些建议它应该在html中的人忽略了浏览器在最初构建页面时使用css的事实。如果不这样做，页面将不得不重新绘制浮动元素，指定的填充，页边距等。|1391904|在html或css中指定，最好根据具体情况来判断。大量相同大小的图像可能最适合使用css，即带有html的单个图像。也就是说，如果您为图像指定了其他样式(边框颜色、样式或半径、浮动等)，那么向css添加宽度和高度将是有意义的。|1391905|如果在html中指定，则只能使用像素。如果你想用百分比来指定，你必须使用css。|1391906|另外，我们鼓励使用ems+&%25而不是px，以避免用户更改浏览器设置等时出现的问题，但图像总是以像素为单位引用的。显然，对图像使用px是有实际原因的。然而，在px中保留图像似乎否定了不使用它们的论点。|1391907|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

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. 

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.

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 &amp; height to the 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.

On a side note, we're encouraged to use ems &amp; % 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.

blocks|key|1391504|text|如果它是你网站模板的一部分，我会把它放在CSS文件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391505|如果它只在一个页面上，它应该是内联的(或者在顶部特定于页面的CSS块中定义)。|1391506|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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

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

blocks|key|1391722|text|我的观点是，正如您所提到的，它是内容的一部分，就像src属性一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391723|另一方面，实际上没有必要在html或css中指定宽度或高度，尽管这可以帮助您的页面更快地呈现。|1391724|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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

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.

blocks|key|1391995|text|我会采用W3C推荐的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391996|也就是说，将width和height定义为如下属性：|1391997|<img+src="example.png"+width="150"+height="150"+alt="example+image">|offset|length|style|CODE|1391998|http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element|1391999|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1W|0|0|1U|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@$F|V|G|W|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@$F|Y|G|Z|1|10]]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|K]]]]

I would go wi(d)th W3C Recommendation.

That is, defining the width and height as an attribute like this: <code>&lt;img src="example.png" width="150" height="150" alt="example image"&gt;</code>

<a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element" rel="nofollow">http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element</a>

blocks|key|1606677|text|我可能错了，如果我错了，请有人纠正我...但我认为谷歌和其他一些搜索引擎会对alt标签的内容进行索引。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1606678|有时，为了设计美观，我创建了一个用字体创建的文本图像，这些字体无法通过HTML获得，但可用于Photoshop、Illustrator等。如果您想创建包含文本信息的精确排版印象，唯一的方法是为搜索引擎创建排版文本的图像，并将实际文本放在alt标签中。|1606679|如果有人有更好的解决方案，我很乐意听听。|1606680|同时，考虑到我所描述的需求，作为标准实践，我似乎有理由投票支持HTML内联高度/宽度参数，以及alt文本描述。事实上，它是内容，而不仅仅是在这种情况下的设计--在CSS和搜索引擎拿出更好的解决方案之前，这种情况真的不应该是规则的例外。|1606681|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

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. 

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.

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.

blocks|key|1606815|text|电子邮件客户端如何将img约束作为属性处理，而不是内联样式？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1606816|<img+src="http://imperavi.com/img/redactor-image.jpg"+width="1400"+>|code-block|syntax|javascript|1606817|https://www.emailonacid.com/app/acidtest/display/summary/FAPNOuxiTtQN72OswSOfnQWbfnZswUAHhGCPbuzh4hk9a/shared|offset|length|1606818|<img+src="http://imperavi.com/img/redactor-image.jpg"+width="1400"+height="582"+>|1606819|https://www.emailonacid.com/app/acidtest/display/summary/CbRqMbMtCbVdpggthGRn5QPWeidpIo8aHaa6kl8TCqaD6/shared|1606820|<img+src="http://imperavi.com/img/redactor-image.jpg"+style="width:+120px;+"+>|1606821|https://www.emailonacid.com/app/acidtest/display/summary/CemSW48eKxJBuQqCIO8oh8y77muOKfPvBsYsDjyswhi8g/shared|1606822|<img+src="http://imperavi.com/img/redactor-image.jpg"+style="width:+120px;+height:+50px;"+>|1606823|https://www.emailonacid.com/app/acidtest/display/summary/vjAVkYnlD3TQyrfIDj4NGvoneeDc8hakzLaHdMsETaGSE/shared|1606824|因此，img大小约束不应该与内联样式一起设置，主要是因为Outlook+2007/2010/2013不支持它们。|1606825|当同时使用属性和内联样式时会发生什么？一些客户端使用其中之一，而另一些客户端将inline+width与属性height结合使用：|1606826|<img+src="http://imperavi.com/img/redactor-image.jpg"+width="1400"+height="582"+style="width:+120px;+height:+50px;"+>|1606827|https://www.emailonacid.com/app/acidtest/display/summary/6JdKm63qDVDxHuaJE2lZhV4NAOq8qxG4eSQ7VWRUALWLP/shared|1606828|tldr:对html电子邮件使用img属性。|1606829|entityMap|0|LINK|mutability|MUTABLE|url|1|2|3|4^0|0|0|0|31|0|0|0|0|31|1|0|0|0|31|2|0|0|0|31|3|0|0|0|0|0|31|4|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1J|8|@]|9|@$I|1K|J|1L|1|1M]]|A|$]]|$1|K|3|L|5|D|7|1N|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|1O|8|@]|9|@$I|1P|J|1Q|1|1R]]|A|$]]|$1|O|3|P|5|D|7|1S|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1T|8|@]|9|@$I|1U|J|1V|1|1W]]|A|$]]|$1|S|3|T|5|D|7|1X|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1Y|8|@]|9|@$I|1Z|J|20|1|21]]|A|$]]|$1|W|3|X|5|6|7|22|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|23|8|@]|9|@]|A|$]]|$1|10|3|11|5|D|7|24|8|@]|9|@]|A|$E|F]]|$1|12|3|13|5|6|7|25|8|@]|9|@$I|26|J|27|1|28]]|A|$]]|$1|14|3|15|5|6|7|29|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|2A|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|H]]|1D|$5|19|1A|1B|A|$1C|N]]|1E|$5|19|1A|1B|A|$1C|R]]|1F|$5|19|1A|1B|A|$1C|V]]|1G|$5|19|1A|1B|A|$1C|13]]]]

How do email clients deal with img constraints as attributes vs inline styles?

<pre><code>&lt;img src="http://imperavi.com/img/redactor-image.jpg" width="1400" &gt;
</code></pre>

<a href="https://www.emailonacid.com/app/acidtest/display/summary/FAPNOuxiTtQN72OswSOfnQWbfnZswUAHhGCPbuzh4hk9a/shared" rel="nofollow">https://www.emailonacid.com/app/acidtest/display/summary/FAPNOuxiTtQN72OswSOfnQWbfnZswUAHhGCPbuzh4hk9a/shared</a>

<pre><code>&lt;img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" &gt;
</code></pre>

<a href="https://www.emailonacid.com/app/acidtest/display/summary/CbRqMbMtCbVdpggthGRn5QPWeidpIo8aHaa6kl8TCqaD6/shared" rel="nofollow">https://www.emailonacid.com/app/acidtest/display/summary/CbRqMbMtCbVdpggthGRn5QPWeidpIo8aHaa6kl8TCqaD6/shared</a>

<pre><code>&lt;img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " &gt;
</code></pre>

<a href="https://www.emailonacid.com/app/acidtest/display/summary/CemSW48eKxJBuQqCIO8oh8y77muOKfPvBsYsDjyswhi8g/shared" rel="nofollow">https://www.emailonacid.com/app/acidtest/display/summary/CemSW48eKxJBuQqCIO8oh8y77muOKfPvBsYsDjyswhi8g/shared</a>

<pre><code>&lt;img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" &gt;
</code></pre>

<a href="https://www.emailonacid.com/app/acidtest/display/summary/vjAVkYnlD3TQyrfIDj4NGvoneeDc8hakzLaHdMsETaGSE/shared" rel="nofollow">https://www.emailonacid.com/app/acidtest/display/summary/vjAVkYnlD3TQyrfIDj4NGvoneeDc8hakzLaHdMsETaGSE/shared</a>

So, img size constraints should not be set with inline styles, primarily because Outlook 2007/2010/2013 does not honor them.

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:

<pre><code>&lt;img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" &gt;
</code></pre>

<a href="https://www.emailonacid.com/app/acidtest/display/summary/6JdKm63qDVDxHuaJE2lZhV4NAOq8qxG4eSQ7VWRUALWLP/shared" rel="nofollow">https://www.emailonacid.com/app/acidtest/display/summary/6JdKm63qDVDxHuaJE2lZhV4NAOq8qxG4eSQ7VWRUALWLP/shared</a>

tldr: Use img attributes for html email.

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

<pre><code>width:15px;
</code></pre>

or inline...

<pre><code>&lt;img width="15"
</code></pre>

?

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.

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

Image width/height as an attribute or in CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

指定图像高度和宽度的“正确”语义方式是什么？在CSS中...width:15px;或者内联..。<img width="15"CSS似乎是放置视觉信息的正确位置。另一方面，很少有人会认为不应该将图像"src“指定为属性，并且高度/宽度似乎与"src”一样与二进制图像数据绑定在一起。(是的，我意识到从技术和最终用户的角度来看，这真的无关紧要。)

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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