首页 > 前端故事

非固定宽度图片(响应式图片)等比例显示

时间:2020-05-19|浏览次数:172次

有时候开发响应式网站的时候,需要固定图片的高度,但又要保证图片不变形等比显示

确保即使在加载图像之前,它们也要占用一些空间,否则img元素将被缩小到零高度,从而导致布局重排并使惰性加载效率低下。

很多方法可以避免内容重排。我已经测试了其中三个,发现最快的方法是完全避免使用占位符,而使用垂直填充技巧。

使用场景:带图片的瀑布流

要求:后端能够提供图片的原始宽高。

垂直填充技巧

<div class="image-wrapper">
    <img class="image" alt="An image" src="demo.jpg" />
</div>

核心公式 height/width * 100

.image-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: {图片的 height/width * 100 } %;
    position: relative;
}
.image {
    width: 100%;
    height: auto;
    position: absolute;
}