CSS 图片加载提前占位 padding-top、padding-bottom

2023/6/9 11:52:12

本文主要是介绍CSS 图片加载提前占位 padding-top、padding-bottom,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

今天聊一个图片加载提前占位的一个问题 🤔,内容比较适合初学者。

起因

在响应式页面当中,图片加载之前是不知道图片高度的,加载成功图片完全撑开。如果不做提前占位会把下面的内容挤下去,页面出现抖动,就像下面效果一样:

css-ccupy-no.gif

假如图片是自适应的,宽度为屏幕宽度的30%,高度等比例缩放,这时候是无法直接设置图片高度的,所以就导致了图片未加载前高度为0,加载成功后撑开的问题。

解决这个问题就需要对图片进行提前占位,这里虽然不确定图片的高度,但是图片的比例是确定的。(要是图片的比例都不确定那就玩不了了😅……)

padding-top

所以有请今天的主角登场:padding-top或者padding-bottom

padding-top的值设置为百分比的时候,让我们先看一下mdn官方是怎么解释的:

当内边距(padding)是一个百分比的时候,百分比是和包含块(containing block)的宽度有关的,同样一定不能为负数。

说白了就是padding-top的值如果是百分比,那么这个百分比是相对于其父容器的宽度的。

比如下面这个案例(案例写成了padding-bottom,效果都是一样的):

.content{
  width: 300px; /* 也可以是百分比 */
  height: 500px;
  background-color: aquamarine;
}
.box{
  width: 100%;
  height: 0;
  padding-bottom: 50%; /* 相对于父级宽度,也就是150px */
  background-color: red;
}
<div class="content">
  <div class="box"></div>
</div>

.boxpadding-bottom的50%是相对于父容器.content的宽度决定的,也就是150px。而且.content也不一定是准确的px值,也可以是相对于页面的百分比值,这就适用于响应式的百分比宽度。

css-ccupy-demo.gif

所以我们可以用图片的宽高比作为padding-bottom的值提前把图片所要占用的空间撑开,然后img绝对定位在.content上面就可以达到提前占位的效果。

比如下面案例使用的图片宽高是300px * 450px,那么padding-bottom的值就可以设置为150%

这里为了少写一个div,用伪类代替:

.content{
  position: relative;
  width: 300px;
  font-size: 0; /*  消除内联元素间的间隔(空格) */
}
.content::before{
  content: '';
  display: block;
  width: 100%;  /* 400px 相对于content的width */
  padding-bottom: 150%;  /* 200px 相对于content的width */
  background-color: red;
}
.content img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="content">
  <img src="https://img1.baidu.com/it/u=2348819965,1910380145&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" alt="">
</div>
<div>下方内容下方内容下方内容</div>

可以看到在加载过程中下方内容没有从上面被挤下来,提升了用户体验。

css-ccupy.gif

大致思路就是这样,主要是使用padding-top或者padding-bottom的百分比用来实现占位效果 😃。



这篇关于CSS 图片加载提前占位 padding-top、padding-bottom的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程