一、问题场景
假设我们在一个页面中需要异步加载图片，图片尺寸不是固定的，而是自适应屏幕宽度的正方形。
由于屏幕尺寸未知，这时我们就不能设置固定的图片尺寸。如果不做处理，页面就会在加载图片的过程中发生“抖动”
二、解决方法
- 先明确一个知识点：
在css中，以 % 为单位的 margin 和 padding 值的计算，是相对于其父元素的width 而非 height。
- 下面上代码（部分为vue语法）：
<!-- HTML -->
<div class="img-wrapper">
<img :src="food.image">
</div>
/* CSS */
.img-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
在上述css代码中，通过设置padding-top为100%，就实现了一个宽高相等的容器（img-wrapper）。效果图如下：
image.png
网友评论