怎样利用CSS图片占位实现图片未加载完成的情况下保持图片占位区的宽高比

2022年08月16日 阅读406次 分类:开发 标签:微码经验css

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

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

在响应式或者需要计算滚动条位置等开发中,可能因为网络原因,图片加载慢、加载失败会出现不可预料问题。此时就有CSS实现在图片未加载的情况下实现占位,保持图片占位区的宽高比,并如真实图片可以大小自适应的需求。

观点

能用 CSS 解决的就坚决不用 JS。

解决思路

有个设计网站:Dribbble,我发现首页列表图片未加载的情况下,有个空白占位,而且图片加载完成后,刚好填充该空白,且页面未抖动。

扒源码分析:

在 CSS 中,padding 的百分比是相对于元素自身的75%,就是 75 / 100 = 600 / 800,padding-bottom / 100 = height / width

假设,图片尺寸 800 x 600

那么,padding-bottom = 600 / 800 * 100 = 75

所以设置 padding-bottom: 75% 就能保持宽高比。

公式(百分比):

 padding-bottom = H / W * 100

实现方案

利用before或者after伪类作为占位符,图片绝对定位。

<!-- html结构 -->
<div class="img-placeholder">
    <img src="..." />
</div>

<!-- css代码 -->
<style>
    .img-placeholder{
            position: relative;
        overflow: hidden;
    }
    .img-placeholder:before{
        content:"";
        display:block;
        padding-bottom:75%; // H / W * 100;
    }
    .img-placeholder>img{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
</style>


(本篇完)

是不是学到了很多?可以

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

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