图像宽度的 W3C 验证错误答案

【问题标题】：W3C validation error with image width图像宽度的 W3C 验证错误
【发布时间】：2016-09-06 15:38:38
【问题描述】：

我需要一张图片来调整我网页的全宽。这适用于以下 HTML/CSS：

#logo{
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  z-index: 3;
  opacity: .8;
}

&lt;div id="logo"&gt;&lt;img src="/logo.png" alt="logo" width="100%"&gt;&lt;/div&gt;

但是，W3C 验证将此视为错误。 “元素 img 上属性宽度的错误值 100%：应为数字，但看到的是 %。”

我尝试了这种替代方法，但现在图像当然不会调整大小：

<div id="logo"><img src="/logo.png" alt="logo" width:100%;></div>

如何在仍通过 W3C 验证的同时保持相同的效果？这是我整个页面上唯一的错误，我知道这并不重要，但肯定有我忽略的解决方案。

【问题讨论】：

标签： html css

【解决方案1】：

请使用以下代码进行 W3C 验证

<div id="logo"><img src="/logo.png" alt="logo" width="100%" /></div>

（或）

<div id="logo"><img src="/logo.png" alt="logo" style="width:100%;" /></div>

【讨论】：

【解决方案2】：

因为宽度属性不使用 %，所以它使用像 width='100' 这样的数字，表示 100px。如果要在图像上应用 100% 宽度，请使用 CSS

#logo img {
   width: 100%
}

【讨论】：

【解决方案3】：

通过阅读 w3school 官方文档

在 HTML 4.01 中，宽度可以以像素或包含元素的百分比来定义

还有

在 HTML5 中，值必须以像素为单位。

所以你不能为HTML5指定一个有效的百分比宽度，尝试使用style="width:100%"

【讨论】：