指定图像高度和宽度的“正确”语义方式是什么？在CSS ......
width:15px;
或内联...
<img width="15"
CSS似乎是放置视觉信息的正确位置。另一方面，很少有人认为图像“src”不应该被指定为属性，并且高度/宽度看起来像二进制图像数据那样与“src”相关联。
（是的，我从技术的，最终用户的角度来看，这无关紧要。）
答案 0 :(得分：72)
应该内联定义。如果您使用的是img标记，那么该图像应该具有内容的语义值，这就是验证所需的alt属性的原因。
如果图像是布局或模板的一部分，则应使用img标记以外的标记，并将图像指定为元素的CSS背景。在这种情况下，图像没有语义含义，因此不需要alt属性。我相当肯定大多数屏幕阅读器甚至都不知道存在CSS图像。
答案 1 :(得分：17)
我认为这取决于你如何使用该属性。如果您在列表或表格中设置多个图像以便正确布局，则将宽度/高度放在 CSS 中以避免添加另一个集合标签列表中的每个图像。使用像
这样的东西ul.gallery img: { width:117px; }
另一方面，如果您要将图片插入某些内容并且需要一定的尺寸才能使文档正常流动，请将其放入 HTML 。这样您就不必为html中的每个不同图像设置样式表。这样，如果您将内容更改为不同的图像，一起删除图像，您就不会在CSS中分散残留的代码以便记住删除。
答案 2 :(得分：15)
高度和宽度应包含在HTML中。原因是它在页面上创建了间距。如果由于某种原因img无法加载（并且你是一个好孩子并且包括一个alt ..浏览器将显示该帧（使用w和h提供）和alt里面。
主要的有益理由是防止“流行”效应。当浏览器加载页面时，有时像img这样较大的方面需要更长时间才能加载，如果你没有在HTML中指定w和h，浏览器会暂时崩溃该区域，认为它不在那里。然后，当它最终加载所有弹出到适当的位置。
这尤其令人讨厌，但在计算机上仍然很烦人，因为你要点击一个链接，突然页面向下移动，你不小心点击了错误的链接。
答案 3 :(得分：8)
我会说CSS。
HTML是关于内容的，
CSS是关于演示文稿。
答案 4 :(得分：5)
如果你看一下HTML5规范，指定高度和宽度是一个选项而不是一个要求。因此，无论有没有这些属性，代码都有效。
从实际的角度来看，非常希望指定它们以防止如上所述的页面重排。然而那些暗示它应该在html中的人因为这个缺少了浏览器在最初构建页面时使用css的事实。如果他们不这样做，页面将不得不重新绘制浮动元素，指定填充，边距等。
最好根据具体情况判断是否在html或css中指定。大量相同大小的图像最好用css，一个带html的图像。也就是说，如果你为图像指定其他样式（边框颜色，样式或半径，浮动等），添加宽度和宽度是有意义的。高度到css。
如果您在html中指定，则只能使用像素。如果你想用百分比来指定你必须使用css。
另一方面，我们鼓励使用ems＆amp; ％，而不是px，以帮助避免用户更改浏览器设置等问题，但图像始终以像素为单位。显然，将px用于图像有一些实际的原因。然而，将图像保存在px中似乎会否定不使用它们的论点。
答案 5 :(得分：4)
我会说HTML。
width和height属性用于阻止页面以不连续的方式加载和增长。
如果你曾经在页面上阅读过一段文字而只是为了让它向上推，这要归功于上面加载的图片，你知道它有多么令人沮丧！
为每个图像添加一个ID来指定它的宽度和高度将是荒谬的，并且几乎与添加两个宽度/高度属性一样混乱。
Firefox没有使用宽度和高度属性来保留图像空间，但我很惊讶他们实际上没有更新它。
答案 6 :(得分：4)
根据<img> article at MDN，HTML属性表示图像的内在尺寸，即其实际尺寸。这就是为什么，而HTML 4也允许百分比值，HTML5只允许px值。 （常见陷阱：不应写“px”）
如果要显示具有这些尺寸的图像，请完成工作。否则，您还必须添加CSS以指定 display 大小。
当然，最好以显示的尺寸提供图像，以避免浏览器调整大小，节省带宽等，但这并非总是可行。
另请参阅此问题的答案：What's the difference between HTML's and CSS's width attribute?
答案 7 :(得分：2)
如果它是您网站模板的一部分，我会将其放在CSS文件中。
如果它只在一个页面上，它应该是内联的（或在顶部的特定于页面的CSS块中定义）。
答案 8 :(得分：1)
我认为它是内容的一部分，正如你所提到的，就像src属性一样。
另一方面，没有必要在html或css中指定宽度或高度，尽管它可能有助于您的页面渲染速度更快。
答案 9 :(得分：1)
我会去w（d）W3C推荐标准。
即，将宽度和高度定义为如下属性：
<img src="example.png" width="150" height="150" alt="example image">
http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
答案 10 :(得分：0)
我可能是错的，如果我是，请，有人纠正我......但我认为谷歌和其他一些搜索引擎会对alt标签的内容进行索引。
有时候，对于设计美学，我创建了一个用不能通过HTML获得的字体创建的文本图像，但可以在Photoshop，Illustrator等中使用。如果你有一个精确的印刷印象，你想要创建涉及文本的信息，实现这一目标的唯一方法是创建印刷文本的图像，并将实际文本放在alt标记中，以便搜索引擎。
如果某人有更好的解决方案，我很乐意听到。
与此同时，由于需要我所描述的内容，我认为投票支持HTML内联高度/宽度参数以及alt文本描述似乎是合理的。实际上，内容不仅仅是在这种情况下进行设计 - 在CSS和搜索引擎提出更好的解决方案之前，这种情况确实不应该成为规则的例外。
答案 11 :(得分：0)
电子邮件客户端如何处理img约束作为属性与内联样式？
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >
因此，不应使用内联样式设置img大小限制，主要是因为Outlook 2007/2010/2013不尊重它们。
使用属性和内联样式时会发生什么？有些客户使用其中一种，有些使用内联宽度和属性高度：
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >
tldr：对html电子邮件使用img属性。