当使用 Picturefill 2 时,我会在页面加载时在图像上跳转布局,例如,当您没有在普通图像上指定高度时。这是 Picturefill 所期望的吗?有没有办法解决这个问题?谢谢。
问问题
119 次
1 回答
2
您描述的问题不一定限于 Picturefill。为避免此问题,您可以计算图像的高度与宽度的比率。即使为响应式站点加载图像,尽管由于屏幕尺寸您可能不知道图像尺寸,但这个比例是相同的。例如,对于 200 像素的高度和 300 像素的宽度:
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%;
}
那应该行得通。查看此博客文章和此CodePen示例以获取更多信息。
编辑
如果响应式图像加载的图像宽度和高度的比例不同,则此方法不起作用。我刚遇到这种情况,所以请注意。
于 2015-07-13T16:09:38.137 回答