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

2022年05月22日 阅读478次 分类:开发 标签:css微码

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1897.html

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

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


(本篇完)

是不是学到了很多?可以

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1897.html