自适应实现盒子与背景图相等的宽高比例（给定盒子的宽，实现盒子的高自适应，根据背景图的宽高比例来确定）

自适应实现盒子与背景图相等的宽高比例

需求

1. 给定盒子的宽，实现盒子的高自适应，根据背景图的宽高比例来确定

实现

1. 利用background-size: 100% auto; 实现背景图的宽度根据盒子宽度自适应
2. 利用给盒子添加伪类，伪类的高度根据盒子宽度和背景的宽高比例计算，由伪类撑开盒子的高度

.box {
width: 100%;
background-image: url('');
background-size: 100% auto;
}
.box::before {
content: '';
display: block;
padding-top: 100%; // 高是宽的百分之几（100% 就是1：1），根据背景的宽高比例计算
}

扩展

1. 使用背景图的方式实现这种效果是比较不方便的
2. 可以尝试使用img标签，实现相同的效果

.box {
width: 100%;
}
.box > img {
display: block;
width: 100%; // 当只设置宽或高是，会自动按原比例缩放
}