页面加载时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示例。

编辑

如果响应图像加载的图像宽度和高度的比率不同，则此方法不起作用。我刚遇到这种情况，所以先提个醒。