css使用padding-bottom百分比进行提前占位，防止抖动

2021-04-16 05:27

阅读：412

YPE html>

标签：适应出现 auto 提前图片加载其他 style web开发拉伸

在web开发中，经常会遇到这样一个问题，比如一个宽度百分百，高度自适应的图片，在网速慢的情况下加载过程中会出现抖动的问题（未加载图片前容器的高度为0，图片加载完成后下面的内容会被挤下去）。

这种问题如果是图片有固定高度，就不会出现加载抖动。但一般情况下，为了使图片不被拉伸，高度一般设为自适应，那么为了防止加载抖动，我们需要给图片提前占个位，这里使用的是css的padding-bottom百分比进行占位。

示例代码如下

.img-box{
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
}

这里的50%是图片的高宽比例，切记是相对于父元素宽度的50%（即.img-box的上一级），不是相对于自己的width，详情请看下面的例子。

这里写了一个小案例



padding-bottom

如图所示

技术图片

这种情况下box2中如果有图片宽高比为一比一时（根据padding的百分比），加载过程中就不会出现抖动的情况，同理box1也是如此。

当然解决抖动还有其他方法，比如何以用vw（兼容性不太好，这里就不列举了），还有比如在微信小程序中rpx，如果图片的设计大小宽高为750×300时，就可以直接写成height: 300rpx。

css使用padding-bottom百分比进行提前占位，防止抖动

标签：适应出现 auto 提前图片加载其他 style web开发拉伸

原文地址：https://www.cnblogs.com/lwlblog/p/12304879.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：css使用padding-bottom百分比进行提前占位，防止抖动
文章链接：http://soscw.com/index.php/essay/76052.html

亲，登录后才可以留言！