css使用padding实现容器或图片的等比例

[Lenny-Hu]

• padding的值使用百分比单位时，是基于父元素宽度的百分比计算的

• 高度随外层容器等比例进行缩放，可以使用 height: 0; padding-bottom: <百分数单位>，例如百分数单位填写 100%，代表宽高比为1:1，填写50%，代表宽高比为1:0.5，假如父元素宽为100px，这个子元素的高度就是50px

[Lenny-Hu]

使用上述方法时，如果父元素没有固定高，那么会因为 图片 或者 内容 延迟的加载 出现页面闪烁的情况，可在父元素设置如下代码进行占位

.parent {
position: relative;
// 改伪元素原来用来占位撑开高度
&::after {
content: '';
display: block;
padding-top: 100%; // 100% 是假设比例为1:1，需要根据实际情况
}

 .child{
  position: absolute; // 不设置绝对定位，父元素的高度就不对
  height: 0;
  padding-bottom: 100%;
}

}