css - HTML5 在带有图像的响应式站点方面存在缺陷

Question

我目前正在构建一个响应式网站，但遇到了 HTML 5 的一个奇怪缺陷。

将不再支持按 100% 调整图像大小以及背景图像。您现在只能按像素指定图像大小。因此，如果您有一个列或网格系统中的图像，并且该列或网格的大小与大多数一样以 % 为单位，则图像将回落到其原始大小。如果我们愿意只使用最大媒体尺寸的最大分辨率的图像，这很好。

这是对响应式网站的根本性打击。我在网上查看了响应式解决方案，似乎甚至像 pure.css 这样的系统也忽略了这个缺陷，并将大量图像放入其中，在全高清上工作正常，但需要很长时间才能加载。这是处理响应式网站时的一个主要问题，因为图像本质上现在必须以完全预期的分辨率输出。想象一下，当 4hd 成为常态时，所有响应式网站都需要大小约为 8mb 的压缩 jpeg 才能正常工作。即使对于微小的图标，如果它们打算扩大或缩小规模。

然而，该缺陷已被浏览器发现，这些浏览器目前仍支持 100% 的图像宽度，但仅在样式为内联时才支持 - 多长时间？

下面是一个示例，其中我通常将 img 设置为由容器包裹，使图像适合 100% 的给定空间，同时保持其比例:

.photo-box img {
max-width: 100%;
height: auto;

}

在 HTML 5 中这不再有效。该图像将仅以其最大分辨率显示。然而，如果你像这样强制 100% 进入内联

<img src="images/pics/articles/article_127.jpg" alt="girl" width="100%"/>

然后这也按预期工作。但这不符合 html 5。查看 HTML 4.01 和 HTML5 之间的差异 [http://www.w3schools.com/tags/att_img_width.asp][1]

现在我知道你们中的一些人会说 - 好吧，为什么要使用百分比来调整图像大小？但是响应式站点总是需要它，并且当更大的媒体类型可用时，对它的需求会更大。不要忘记，百分比既可以使图像变大，也可以方便地调整图像的大小，而不需要任何 jquery 或类似的 API 或其他客户端脚本。当图像在没有 % 的情况下变小时，当宽度具有收缩百分比容器或父级时，它可能会失去其比例。只有 width 100% 和 height auto 可以阻止这种情况发生。

现在回到与背景图像相同的问题 - 背景图像的常见用途是对图像应用圆 Angular 和阴影效果，但用不透明度设置为 0 的相同来源的 img 标签覆盖该背景。这整个网络都在使用它来解决这样一个事实，即您不能将阴影或 Angular 的样式一致地设置为 img 标签。只有它的容器可以使用这种效果进行样式化，并且图像方 Angular 与它们重叠。现在不再支持 100% 宽度，此效果将不起作用，因为背景中的图像无法调整大小以匹配其上方的响应式 img，因此即使将重复设置为无，背景也会平铺，这看起来很糟糕。

有没有人遇到同样的问题或者知道解决办法。任何人都可以指定我们需要向谁提及此内容以便将其返回到 HTML5 中吗？

Answer 1

您混淆了 属性 ( <img width="" /> ) 宽度与 CSS 属性 width ( img { width: ... ; } ) 不一样。

这是一个更好的来源:http://www.w3.org/wiki/HTML/Elements/img这里可能是这篇文章的副本:What's the difference between HTML's and CSS's width attribute?

关于属性 width=""

width = non-negative integer
Give the width of the visual content of the element, in CSS pixels. 

关于 CSS 属性 width:; http://www.w3.org/wiki/CSS/Properties/width

Values  <length> | <percentage> | auto | inherit
Initial value   auto
Applies to  All elements but non-replaced inline elements, table rows, and row groups 

因此您可以安全地使用 CSS width具有百分比但不在属性内的属性。

如果你想给一个图像一个 100% 的行内宽度，你可以这样做:

<img style="width: 100%;" />

关于你的问题。

如果您的 HTML 是这样的:

<div class="photo-box">
    <img src="images/pics/articles/article_127.jpg" alt="girl" width="100%"/>
</div>

使用这个选择器:

.photo-box img {
    width: 100%;
    height: auto;
}

很可能该属性覆盖了 CSS 属性。删除您的测试属性或尝试(但不要一直使用它，仅用于测试)

.photo-box img {
        width: 100% !important;
        height: auto;
    }