有时候开发响应式网站的时候,需要固定图片的高度,但又要保证图片不变形,等比显示。
确保即使在加载图像之前,它们也要占用一些空间,否则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; }