Question

所以我的HTML5文档中有一个IMG标记，内容如下：

<img src="elements/background.png" alt="" width="100%" height="100%" />

当我通过W3C验证器（doctype是HTML5，编码为UTF-8）运行文档时，它会出现两条错误消息，一条用于width属性，另一条用于height属性。他们都说了一句话，“预计会有一个数字，但却会看到％。”

我在W3C网站上查了一下，IMG标签的宽度和高度属性都支持HTML5中的百分比。那是怎么回事？

Answer 1

您在哪里找到了有关百分比的信息？根据W3C：

[...]如果指定了属性，则必须具有有效的非负整数值。

http://www.w3.org/TR/2010/WD-html5-20100624/the-map-element.html#attr-dim-width

将值更改为整数或使用CSS

Answer 2

使用百分比确实有效，但我想它已经在以后的html版本中停止了。我之前就像7到8年前一样使用过..

这是提供百分比信息的链接..

http://www.tizag.com/htmlT/images.php

高度和宽度值也可以是百分比。百分比值是相对于父HTML元素（通常是正文），其中意味着你是否有一个像元素那样的父元素整个屏幕（1024x768），然后是高度和宽度为100％的图像将占用整个身体元素（1024x768）。在我们的例子中在下面，我们将图像放在一个大约400的表格元素中像素宽200像素高。

Answer 3

我相信你误读了规范，即“以像素为单位”。

http://dev.w3.org/html5/markup/img.html

Answer 4

是的，宽度＆amp;高度已被支持为百分比 - - 对移动设备非常有用，并根据设备分辨率调整大小。然而，HTML5不会（感叹）。试试这个假人没有doctype

<!-- !doctype html -->
<html>
<head></head>
<body>
<style type="text/css">
  .pics { background-color:black !important;
  border:dashed red 2px;        
             color:white;
margin:1px; padding:1px; height:65% !important;
   }
</style>
<div>
<span>just junk<br></span>
<span>
<img class="pics" src="any_image_you_like.jpg" >
</span>
<div>
</body</html>

保存并打开文件 - 现在调整浏览器窗口的大小

Answer 5

我在页面的标题中插入了

<style>
img
{   
    width: 30%;
    height: auto;
    border: solid 1px black;
}
</style>

它确实使页面上的所有图像具有相同的宽度，但这是一个只需要的页面一个图像。它阻止了来自HTML5验证器的令人讨厌的ululations。

为什么W3C验证器会显示这些IMG属性的错误消息？

5 个答案: