对 img 元素的宽度、高度属性使用百分比的后果是什么？答案

【问题标题】：What are the consequences of using percentage for width,height attributes of an img element?对 img 元素的宽度、高度属性使用百分比的后果是什么？
【发布时间】：2014-11-23 21:07:56
【问题描述】：

如果这是一个愚蠢的问题，请原谅，但事实是我对此一无所知。

我正在寻找某种方法来定位 HTML 页面中的 img 元素，这些页面注意到 w3schools.com 的这句话（它是说在 img 元素中设置 width）：

在 HTML 4.01 中，宽度可以以像素或包含元素的百分比来定义。在 HTML5 中，该值必须以像素为单位。

它表示宽度属性必须设置为像素而不是百分比。但是使用百分比时解决我的问题要容易得多。我使用了百分比并在FireFox、Chrome 和IE 的最新版本中检查了结果。一切正常。

现在，我的问题是，使用百分比（尽管有 HTML5 指令）实际上可以正常工作时会产生什么不良后果？我们应该关心什么，不应该关心什么？

非常感谢您阅读并澄清情况。

【问题讨论】：

请注意，w3schools 经常在其网站上提供有关内容的错误信息，并且是正确学习的不良资源。没有理由不使用百分比宽度（它在响应式设计中被大量使用）：developer.mozilla.org/en-US/docs/Web/HTML/Element/img。我唯一要说的是不要使用百分比宽度和百分比高度，因为您的纵横比可能会丢失
但是请注意，关于这个图像高度，mozilla 和 w3schools 都在说同样的事情，但没有列出更多细节或原因。
我的假设是 HTML5 会自行计算和调整图像的纵横比。为此，最好以像素为单位而不是百分比。
@Pete - 请注意，它在 w3 中有很好的说明：The width and height attributes on img, iframe and object are no longer allowed to contain percentages. - w3.org/TR/html5-diff
注意可以在css中以%、px、em等来定义图片大小。

标签： css html width html4

【解决方案1】：

您好，我发现您的假设是正确的，但为了清楚起见，请自己尝试一下。基于W3 validator

如果您通过此代码：

<img src="http://placehold.it/350x150" alt=" " width="100%" height="100%">

你得到一个错误

元素 img 上属性宽度的错误值 100%：应为数字，但看到的是 %。

但如果你得到这个

<img src="http://placehold.it/350x150" alt=" " width="350" height="150">

一切都很好，那么规范是您不能在标签本身中定义百分比，但您可以使用 css 来做到这一点。

【讨论】：

嗨，我在 chrome 中粘贴了第一个代码。它显示了图像。而且，它在调整窗口大小时保持纵横比。
是的，代码运行...但代码无效。 @Ormoz 就像您可以运行具有多个元素相同 id 的文档但仍然是错误的代码，它可能会在未来出现许多问题.....然后您可以使用验证器来获取干净的代码，在标签上这样做是错误的本身只是用 CSS 设置它。
谢谢，好吧错了，但是写错代码错了？！
@Ormoz 假设是浏览器读取 html 的方式 .. 如果您编写此代码并且不遵守规则，您的代码可能随时崩溃。只需遵循协议即可确保良好的性能
@Ormoz 是的，我会同意的。

【解决方案2】：

在 HTML 中而不是在 CSS 中提供图像尺寸的主要原因是，用户代理（浏览器）可以在浏览器等待图像加载时在页面中为图像留出适当的空间.如果图像大小未设置，则浏览器将不得不在图像下载后重新呈现页面 - 并对页面上的每个后续图像再次执行相同操作。

WHATWG HTML5 文档在presentational markup 部分中声明如下：

出于这些原因，在此版本中，表示性标记已从 HTML 中删除。这种变化不应该让人感到意外。 HTML4 多年前弃用了表现性标记，并提供了一种模式（HTML4 过渡）来帮助作者摆脱表现性标记；后来，XHTML 1.1 更进一步，完全废弃了这些特性。

我会假设，由于百分比值与包含图像的元素相关，因此它们被认为是展示性的，而像素尺寸是绝对的，不会因平台、用户代理或视口而异。

与许多 HTML 属性和属性一样，您可以使用无效、过时或不推荐的语法，浏览器仍会呈现您的页面。这部分是因为它们通常是向后兼容的——即当语法有效时，它们可以呈现用以前版本的标记语言编写的 HTML 文档。

你应该使用无效的语法吗？好吧，你可以这样做，但它也有缺点：不可预测的浏览器渲染无效元素、浏览器性能差、跨浏览器兼容性问题、潜在的安全问题等等。还有人知道那里有 HTML 学究，他们正在查看您的语法，就像狗吐出的东西一样。最终，如果你能以正确的方式做某事——在你的css中指定你的百分比宽度，而不是在你的html中——我认为做错事没有任何意义，因为你尝试过的浏览器仍然会呈现页面。

正如我在评论中提到的，可以在 CSS 中使用各种不同的单位（像素、ems、rems、百分比、厘米、英寸等）指定图像的宽度和高度——请参阅css measurement units @ w3.org。

【讨论】：

非常感谢 Alarmed Alien 提供这个很棒的答案。在您提到的所有原因中，尤其应该警惕HTML Pedants 问题！