在浏览器布局中为响应图像保留空间(防止回流)

Question

我一直在进行更改,以使我的网站更具响应性,总的来说,这一切进展顺利.但是,我遇到了一个问题:

之前,我总是在img元素上使用height和width属性,以便在浏览器加载图像时为图像保留空间.这可以防止布局在浏览器加载时抖动并计算图像所需的空间.

然而,通过使用max-width: 100%和取出高度和宽度属性使我的图像更具响应性后,浏览器不再为图像保留空间(因为它不再知道图像将提前多高或多宽,因为我无法不明确告诉它)

我的目标是让响应式图像在初始加载时占用页面布局中的适当空间.有谁知道这个解决方案？

*编辑(解决方案) - 这是我在这个主题上找到的最好的文章.好方法!

Answer 1

这里的正确答案是通过使用“padding-bottom 技巧”来防止垂直回流。为了使这项技术发挥作用，您必须提前知道图像的比例。

感谢 Anders M. Anderson发表了一篇关于该主题的精彩文章。它是这样工作的：

1. 使用图像容器类（或类似容器）将图像包装在 div 中，并提供适当的样式（如下）
2. 其次，使用绝对定位设计图像并强制它们填充容器的空间
3. 最后，根据图像的长宽比向图像容器 div 添加另一个类。此纵横比类强制在父 div 上添加 padding-bottom，为容器提供正确的高度，并允许您的图像占据预期的空间。

注意，如果您想知道为什么我的类名（如下）看起来很奇怪，请查看“BEM”，这很棒。

.responsive-image__container {
     position: relative;
     height: 0;
     overflow: hidden;
     background-color:black;
  }

  .responsive-image__img {
     position: absolute;
     top: 0;
     left: 0;
     width:100%;
  }

  .responsive-image__container--ratio-16-9 {
     padding-bottom: 56.25%; /* 9/16*100 */
  }

  .responsive-image__container--ratio-4-3 {
     padding-bottom:75%; /* 3/4*100 */
  }

  .responsive-image__container--ratio-1-1 {
     padding-bottom: 100%; /* 1/1*100 */
  }

  /* and so on, for any aspect ratios you need to support */

<div class="responsive-image__container responsive-image__container--ratio-4-3">
      <img src="http://placekitten.com/400/300" class="responsive-image__img">
  </div>

请注意，这也适用于需要响应的嵌入式视频......并在浏览器中占据适当的高度以防止内容回流，这就是该技术的全部要点。