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示例。

修改

如果图像宽度和高度的比率对于响应图像加载不同，则该方法不起作用。我刚遇到这种情况所以只是抬头。

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

1 个答案:

修改