使用百分比对img元素的width,height属性有什么影响？

Question

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

我正在寻找找到一些方法来定位img的元素HTML,她注意到来自w3schools.com这句话(据讲的设置页面width中的img元素):

在HTML 4.01中,宽度可以以像素或包含元素的%来定义.在HTML5中,值必须以像素为单位.

它表示width属性必须设置为像素而不是百分比.但使用百分比时,解决我的问题要容易得多.我用百分比和最新版本的检查结果FireFox,Chrome以及IE.一切都很好.

现在,我的问题是,使用百分比(尽管HTML5指令)虽然它实际上工作正常,但是什么是不良后果？我们应该关心什么,不应该关注什么？

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

Answer 1

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

WHATWG HTML5文档在演示性标记部分中声明了以下内容：

由于这些原因，在此版本中已从HTML中删除了演示性标记。这种变化不足为奇。HTML4在多年前就弃用了表示标记，并提供了一种模式（HTML4 Transitional）来帮助作者摆脱表示标记。后来，XHTML 1.1走得更远，完全淘汰了这些功能。

我假设由于百分比值是相对于包含图像的元素而言的，因此它们被认为是表示性的，而像素尺寸是绝对的，并且不会在平台，用户代理或查看端口之间变化。

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

您应该使用无效的语法吗？可以，但是可以这样做，但它有一个缺点：无效元素的不可预测的浏览器呈现，不良的浏览器性能，跨浏览器兼容性问题，潜在的安全隐患等等。还知道外面有HTML pedant正在查看您的语法，就像狗扔了一样。最终，如果您能以正确的方式做某件事-在您的CSS中指定百分比宽度，而不是在html中指定-我看不出在做错任何事情，只是因为您尝试过的浏览器仍会呈现这页纸。

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