Picturefill 2 IMG高度在页面加载时跳跃

Question

使用 Picturefill 2 时，我会在页面加载时在图像上跳转布局，例如，当您没有在普通图像上指定高度时。这是 Picturefill 所期望的吗？有没有办法解决这个问题？谢谢。

Answer 1

您所描述的问题不一定限于 Picturefill。为避免此问题，您可以计算图像的高度与宽度的比率。即使为响应式站点加载图像，尽管由于屏幕尺寸您可能不知道图像尺寸，但这个比例是相同的。例如，对于 200px 的高度和 300px 的宽度：

200px / 300px * 100 = 66.66666667

围绕 Picturefill 元素创建一个容器 div

<div class="image-container">
   <picture>
     <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
     <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
     <img srcset="examples/images/art-medium.jpg" alt=" ">
    </picture>
</div>

并使用以下 CSS

.image-container {
  position: relative;
  padding-bottom: 66.66666667%; /* ratio of image height to width */
  height: 0;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

应该可以。查看此blog post 和此CodePen 示例了解更多信息。

编辑

如果响应式图像加载的图像宽度和高度的比例不同，则此方法不起作用。我刚遇到这种情况，所以请注意。