css非固定宽度图片（响应式图片）等比例显示

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

确保即使在加载图像之前，它们也要占用一些空间，否则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;
}