【发布时间】：2009-03-12 19:47:19
【问题描述】：
指定图像高度和宽度的“正确”语义方式是什么？在 CSS 中...
width:15px;
或内联...
<img width="15"
?
CSS 似乎是放置视觉信息的正确位置。另一方面，很少有人认为不应将图像“src”指定为属性，并且高度/宽度似乎与“src”一样与二进制图像数据相关。
（是的，从技术和最终用户的角度来看，我意识到这并不重要。）
【问题讨论】：
【发布时间】：2009-03-12 19:47:19
【问题描述】：
应该内联定义。如果您使用 img 标签，该图像应该对内容具有语义价值，这就是验证需要 alt 属性的原因。
如果图像要成为布局或模板的一部分，则应使用 img 标签以外的标签，并将图像作为 CSS 背景分配给元素。在这种情况下，图像没有语义，因此不需要 alt 属性。我相当肯定大多数屏幕阅读器甚至都不知道 CSS 图像的存在。
【讨论】：
-
啊，是的，完全正确的答案。 img标签用于信息，css背景用于布局。
-
这个问题与宽度属性无关，与实际图像本身无关吗？
-
问题和答案似乎都无法理解语义 HTML 的概念。高度和宽度是表示属性，无论您将它们放在哪里。对于语义，我们确定图像对 alt 标签中的内容意味着什么。我不记得为什么 HTML 中的宽度/高度如此重要，但我怀疑这是为了防止你在没有 CSS 渲染的情况下点击浏览器。这不是语义问题。如果有的话，它会在一定程度上阻碍关注点分离。
-
内联更好。事实上，HTML 验证器会警告您缺少宽度和高度。
-
它们对自动边距造成完全不同的行为。如果您有一个固定元素，例如顶部/底部/左侧/右侧设置为零，并且您将图像粘贴在其中，您希望将其居中包裹在一个 div 中，那么为了使用自动边距将该 div 居中，您必须指定一个CSS 宽度/高度，因为指定 HTML 属性宽度/高度无效，并且边距保持为零。我不知道为什么存在差异。例如：jsfiddle.net/L1rk46xy 请参见居中文本。删除固定 div 上的“样式”标签，尽管有宽度/高度属性，但它会失去居中。
我认为这取决于您如何使用该属性。如果您要在列表或表格中设置 多个图像 的样式以使其布局正确，则将宽度/高度放入您的 CSS 中以避免需要添加另一组列表中每个图像的标签。使用类似
ul.gallery img: { width:117px; }
另一方面，如果您要在某些内容中插入图像，并且它需要一定的大小才能使文档正常流动，那么将其放入HTML。这样，您就不必为 html 中的每个不同图像弄乱样式表。这样一来，如果您将内容更改为不同的图像，或者将图像全部删除，您的 CSS 中就不会留下散落的代码残留物需要记住删除。
【讨论】：
高度和宽度应包含在 HTML 中。原因是它在页面上创建间距。如果由于某种原因无法加载 img（并且您一直是个好孩子，并且包含了一个 alt.. 浏览器将显示该框架（使用提供的 w 和 h），其中包含 alt。
主要的有益原因是防止“流行”效应。当浏览器加载页面时，有时较大的方面（例如 img）需要更长的时间来加载，如果您没有在 HTML 中指定 w 和 h，浏览器会暂时折叠该区域，认为它不存在。然后，当它最终加载时，所有内容都会弹出到适当的位置。
这特别烦人，但在计算机上仍然很烦人，因为您要单击一个链接，突然页面向下移动，并且您不小心单击了错误的链接。
【讨论】：
-
也可以将其设为inline css，这样它就不会被外部css文件覆盖。
-
WebKit-Browsers 在使用 CSS 时也会保留空间。 Firefox 将始终折叠 404 图像（带有属性和/或 css）。
-
您不需要
width/height属性来防止“pop”效果。这也可以通过 CSS 完成。
根据<img> article at MDN，HTML 属性指示图像的内在尺寸，即它的真实尺寸。这就是为什么 HTML 4 也允许百分比值，而 HTML5 只允许 px 值。 （常见的陷阱：“px”不应该写）
如果您想显示具有这些尺寸的图像，那就大功告成了。否则，您还必须添加 CSS 来指定 display 大小。
当然，最好以显示的大小提供图像，以避免浏览器调整大小、节省带宽等，但这并不总是可行的。
另请参阅此问题的答案：What's the difference between HTML's and CSS's width attribute?
【讨论】：
-
在我看来，感谢您提供的最丰富的答案。但我想知道为什么浏览器应该需要真实的图像尺寸（加载之前）..
-
这样，当页面加载时，浏览器可以通过放置一个占位符在实际下载图像之前正确定位页面内容（围绕图像）。否则，一旦加载图像，浏览器将不得不移动内容。请参阅以下涵盖基础知识的文章，并深入探讨有关 CSS 调整大小的更困难的问题：Setting Height And Width On Images Is Important Again。
我会说 CSS。
HTML 是关于内容的，
CSS 是关于展示的。
【讨论】：
-
问题是图像是内容，如何显示是信息。内容的非呈现属性仍然是内容。
-
@Evan - “如何显示它是信息”。我不同意。信息不取决于它的呈现方式。无论您将一系列数字显示为图表还是列表，数字（即信息）仍然是相同的。
-
一切都可以归结为数字。您不希望您的图像呈现为数字，因为数据不描述图像以外的任何内容。从普通的 html/css 划分的意义上说，将数据标识为图像并不是一种表现形式。
这里是语义标记。同样，对图像背后的数据（例如其原始宽度和高度）进行任何说明也没有错。我认为这样做是正确的，因为它是显示关于图像的“alt”信息：它们都是关于原生图像的元数据，忽略上下文和显示。
-
为了进一步类比，您可以以多种不同的方式呈现 alt 文本，并且大概有一段时间使用 CSS 4.0，也许您将控制用户代理如何呈现 alt 文本。现在，无论图像的原生高度和宽度如何，您都可以将其渲染为不同的。尚未为 alt-text 创建的功能早已为图像显示创建（通过图像元素上的演示 width 和 height css 属性）。
我会说 HTML。
宽度和高度属性用于阻止页面以脱节的方式加载和增长。
如果您曾经阅读页面上的一段文本，但由于上面的延迟加载图片而将其向下推，您就会知道这是多么令人沮丧！
为每个图像添加一个 ID 只是为了指定它的宽度和高度将是可笑的，并且几乎与添加两个宽度/高度属性一样混乱。
问题是 Firefox 没有使用 width 和 height 属性来保留图像空间，但我很惊讶他们实际上没有更新它。
【讨论】：
-
但是当你写到css中时，它不也保留了位置吗？只有当页面加载非常缓慢并且 css 位于单独的文件中时，您才会看到内容被踢出，不是吗？！但是对于页面上的所有内容都是如此，因此图像并不重要。但是你可以把它写在上面的 CSS 块中。还是我在这里忽略了什么？
如果您查看 HTML5 规范，指定高度和宽度是一个选项而不是要求。因此，无论有没有这些属性，代码都是有效的。
从实际的角度来看，非常希望指定它们以防止上面提到的页面重排。然而，那些建议它应该在 html 中的人因为这个原因错过了浏览器在最初构建页面时使用 css 的事实。如果他们不这样做，则必须为浮动元素、指定的填充、边距等重新绘制页面。
是用html还是css指定最好看个人情况。大量相同大小的图像可能最好使用 css 来处理，一个带有 html 的图像。也就是说，如果您要为图像指定其他样式（边框颜色、样式或半径、浮动等），则向 css 添加宽度和高度是有意义的。
如果您在 html 中指定，则只能使用像素。如果您想指定百分比，则必须使用 css。
附带说明，我们鼓励使用 ems & % 而不是 px 来帮助避免在用户更改浏览器设置等时出现问题，但图像始终以像素为单位。显然，将 px 用于图像是有实际原因的。但是，将图像保留在 px 中似乎会否定不使用它们的论点。
【讨论】：
如果它是您网站模板的一部分，我会将其放在 CSS 文件中。
如果它只是在一个页面上，它应该是内联的（或在顶部的一个页面特定的 CSS 块中定义）。
【讨论】：
我认为它是内容的一部分，正如您所提到的，就像 src 属性一样。
另一方面，没有必要在 html 或 css 中指定宽度或高度，尽管它可能有助于更快地呈现页面。
【讨论】：
我会选择 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
【讨论】：
我可能是错的，如果我错了，请有人纠正我……但我认为 Google 和其他一些搜索引擎会将 alt 标签的内容编入索引。
有时，为了设计美学，我创建了一个文本图像，该图像是用 HTML 不可用的字体创建的，但 Photoshop、Illustrator 等可以使用。如果您想要创建一个精确的印刷印象，其中涉及文本获取信息的唯一方法是创建印刷文本的图像并将实际文本放在 alt 标记中以供搜索引擎使用。
如果有人有更好的解决方案，我很乐意听到。
同时，鉴于对我所描述的内容的需求，作为标准做法，我投票支持 HTML 内联高度/宽度参数以及 alt 文本描述似乎是合理的。事实上，它是内容，而不仅仅是在这种情况下的设计——在 CSS 和搜索引擎提出更好的解决方案之前，这种情况真的不应该是规则的例外。
【讨论】：
-
您是否认为谷歌索引
img标签的width属性有价值？？ -
当您谈到为什么要明确指定图像的确切大小的一个可能原因时，您并没有真正回答这个问题（即如何/在哪里指定图像的大小，如 HTML属性与 CSS 规则）。
-
P.S.这些天来，网络字体（通过 CSS3
@font-face规则）似乎是更可取的解决方案（优于将文本预呈现为图像）以客户端计算机上可能不存在的特定字体呈现文本。
电子邮件客户端如何将 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 属性。
【讨论】：