css - 对 img 元素的宽度、高度属性使用百分比会产生什么后果？

Question

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

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

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

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

现在，我的问题是使用百分号(尽管 HTML5 指令)但实际上工作正常会带来什么不良后果？我们应该关心什么，不应该关心什么？

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

Answer 1

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

WHATWG HTML5 文档在关于 presentational markup 的部分中陈述了以下内容:

For those reasons, presentational markup has been removed from HTML in this version. This change should not come as a surprise; HTML4 deprecated presentational markup many years ago and provided a mode (HTML4 Transitional) to help authors move away from presentational markup; later, XHTML 1.1 went further and obsoleted those features altogether.

我会假设，由于百分比值是相对于包含图像的元素而言的，因此它们被认为是表现性的，而像素尺寸是绝对的，并且不会因平台、用户代理或视口(viewport)而异。

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

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

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