使用百分比作为img元素的宽度和高度属性会有什么后果？

Question

使用百分比作为img元素的宽度和高度属性会有什么后果？

csshtmlwidthhtml4

15

我在寻找一种在HTML页面中定位元素的方法时，注意到了来自w3schools.com的这句话（它是在讨论在元素中设置宽度的问题）：

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

它说宽度属性必须以像素而不是百分比来设置。但是当我使用百分比并在最新版本的Firefox、Chrome和IE中检查结果时，一切都正常。

除了W3Schools的指示之外，使用百分比会有什么不好的后果呢？

- Ormoz

4

请注意，w3schools网站上的信息经常错误，不是一个好的学习资源。使用百分比宽度没有任何问题（在响应式设计中使用得非常普遍）：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img。唯一需要注意的是，不要将百分比宽度与百分比高度一起使用，否则可能会失去纵横比。 - Pete

1

但请注意，关于此图像高度，Mozilla和W3Schools都表示相同，而没有列出更多详细信息或原因。 - Amr Elgarhy

1

我的假设是，HTML5将自行计算和调整图像的纵横比。因此，最好以像素为单位而不是百分比来指定宽度。 - Aniruddha Pondhe

2

@Pete - 请注意，w3已经明确说明：img、iframe和object上的width和height属性不再允许包含百分比。- http://www.w3.org/TR/html5-diff/ - LcSalazar

2

请注意，您可以在 CSS 中以百分比、像素、em 等方式定义图像大小。 - i alarmed alien

显示剩余3条评论

2个回答

3

你好，我的发现与您的假设一致，但为了更加清晰，您可以自行尝试。根据 W3 验证器的结果来看：

如果您通过了这段代码：

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

您遇到了错误

在元素img的属性width上得到了一个错误的值100%：期望是数字，但实际看到的是%。

但如果您看到这个：

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

一切都很好，规范是你不能在标签中定义百分比，但你可以使用CSS来实现。

- DaniP

嗨，我在Chrome中粘贴了第一段代码。它显示了图像，并在调整窗口大小时保持了纵横比。 - Ormoz

1

是的，代码可以运行...但是它是无效的代码。就像@Ormoz所说，你可以运行一个带有多个相同ID元素的文档，但这仍然是错误的代码，它可能会在未来出现许多问题.....然后你可以使用验证器来获取干净的代码，只需在标签本身上设置CSS即可。 - DaniP

谢谢，好的，它是错误的，但编写错误代码有什么问题吗？！ - Ormoz

1

@Ormoz 假设这是浏览器读取 HTML 的方式... 如果您编写代码时不遵循规则，代码可能随时崩溃。只需遵循协议以确保良好的性能即可。 - DaniP

好的，那么遵循协议有点像保险。 - Ormoz

1

@Ormoz 好的，我同意。 - DaniP

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- i alarmed alien · Accepted Answer

在HTML中给出图像尺寸的主要原因是为了让用户代理（浏览器）在等待加载图像时，在页面中留出适当的空间。如果未设置图像大小，则浏览器将不得不在图像下载后重新渲染页面，并对页面上每个后续图像执行相同的操作。根据WHATWG HTML5文档在展示性标记部分中所述：“由于这些原因，本版本中已从HTML中删除了展示性标记。这种变化不应该令人惊讶；多年前，HTML4已经弃用了展示性标记，并提供了一个模式（HTML4 Transitional）来帮助作者摆脱展示性标记；稍后，XHTML 1.1进一步淘汰了这些特性。”我认为，由于百分比值是相对于包含图像的元素而言的，因此它们被视为是展示性的，而像素尺寸是绝对的，不会因平台、用户代理或视口而变化。

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

你应该使用无效的语法吗？嗯，你可以，但它有缺点：无效元素的不可预测的浏览器呈现、较差的浏览器性能、跨浏览器兼容性问题、潜在的安全问题等。还有一个问题是，有一些HTML pedant在看着您的语法，就好像它是狗吐出来的东西。最终，如果您可以正确地做某件事情——在CSS中指定百分比宽度，而不是在HTML中——我认为没有任何理由去做错误的事情，只是因为您尝试它的浏览器仍然会呈现该页面。

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