设置图像的宽度/高度以避免图像加载时回流

Question

当我在 html 中使用图像标签时，我尝试在 img 标签中指定它的宽度和高度，这样浏览器甚至会在图像加载之前为它们保留空间，所以当它们完成加载时，页面不会回流（元素不会四处移动）。例如：

 <img width="600" height="400" src="..."/>

现在的问题是我想创建一个更“响应”的版本，对于“单列案例”我想这样做：

 <img style="max-width: 100%" src="..."/>

但是，如果我将其与明确指定的宽度和高度混合使用，例如：

 <img style="max-width: 100%" width="600" height="400" src="..."/>

并且图像比可用空间宽，则忽略纵横比调整图像大小。我明白为什么会发生这种情况（因为我“固定”了图像的高度），我想解决这个问题，但我不知道如何解决。

总结一下：我希望能够指定 max-width: 100% ，并以某种方式确保在加载图像时不会回流内容。

原文由 gabor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新 2： （2019 年 12 月）

Firefox 和 Chrome 现在默认处理这个问题。只需像往常一样添加 width 和 height 属性。有关更多详细信息，请参阅 此博客文章。

---

更新 1： （2018 年 7 月）

我发现了一个更聪明的替代版本： http ://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/。这仍然需要一个包装器元素，它需要 CSS 自定义属性，但我认为它更优雅。 Codepen 示例在 这里（感谢 Chris Coyier 的 原创）。

---

原来的：

来自 Jonathan Hollin 的这篇博客文章：将图像的高度和宽度添加为内联样式的一部分。这为图像保留了空间，防止图像加载时回流，但它也是响应式的。

HTML

 <figure style="padding-bottom: calc((400/600)*100%)">
  <img src="/images/kitten.jpg" />
</figure>

CSS

 figure {
  position: relative;
}

img {
  max-width: 100%;
  position: absolute;
}

figure 可以替换为 div 或您选择的任何其他容器。该解决方案依赖于 CSS calc()，它具有 相当广泛的浏览器支持。

在这里 可以看到工作代码笔。

原文由 wiiiiilllllll 发布，翻译遵循 CC BY-SA 4.0 许可协议