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

时间:2014-09-29 12:55:18

标签: html css html5 width html4

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

我正在寻找一些方法来在img页面中找到HTML元素来注意来自w3schools.com的这句话(它是在{{1}中设置width元素):

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

它表示宽度属性必须设置为像素而不是百分比。但使用百分比时,解决我的问题要容易得多。我使用了百分比并检查了imgFireFoxChrome的最新版本中的结果。一切都很好。

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

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

2 个答案:

答案 0 :(得分:5)

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

WHATWG HTML5文档在presentational markup

一节中说明了以下内容
  

出于这些原因,此版本中已从HTML中删除了表示性标记。这种变化不应该让人感到意外; HTML4多年前就弃用了表示标记,并提供了一种模式(HTML4 Transitional)来帮助作者摆脱表现性标记;之后,XHTML 1.1走得更远,完全废弃了这些功能。

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

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

你应该使用无效的语法吗?嗯,你可以这样做,但它有缺点:无法预测的浏览器呈现无效元素,浏览器性能不佳,跨浏览器兼容性问题,潜在的安全问题等等。还有一些知识,那里有HTML学生,他们正在研究你的语法,就像狗呕吐的东西一样。最后,如果你能以正确的方式做一些事情 - 在你的CSS中指定你的百分比宽度,而不是在你的html中 - 我没有看到做错事的任何一点因为你尝试过的浏览器会仍然呈现页面。

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

答案 1 :(得分:2)

您所发现的是您的假设是正确的,但要说清楚,请亲自尝试一下。基于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做到这一点。