Open Lenny-Hu opened 5 years ago
使用上述方法时,如果父元素没有固定高,那么会因为 图片 或者 内容 延迟的加载 出现页面闪烁的情况,可在父元素设置如下代码进行占位
.parent { position: relative; // 改伪元素原来用来占位撑开高度 &::after { content: ''; display: block; padding-top: 100%; // 100% 是假设比例为1:1,需要根据实际情况 }
.child{
position: absolute; // 不设置绝对定位,父元素的高度就不对
height: 0;
padding-bottom: 100%;
}
}
padding
的值使用百分比单位时,是基于父元素宽度的百分比计算的高度随外层容器等比例进行缩放,可以使用
height: 0; padding-bottom: <百分数单位>
,例如百分数单位填写100%
,代表宽高比为1:1
,填写50%
,代表宽高比为1:0.5
,假如父元素宽为100px
,这个子元素的高度就是50px