关于height、width、padding-bottom实现等比例缩放的css技巧

1、padding-bottom 如果用%来表示的话，计算是根据父元素的width的值进行计算的。

例：父元素.wrapper的width是100px，height设置为0, padding-bottom的值是50%，则该元素的高是50px

2、 百分比方法适用于的场景：一个图片需要全部显示出来，而且图片本身的宽高比例不变，能够随着屏幕的大小进行变化。

3、实现等比缩放的效果，还可以通过vw来设置，缺点：有的浏览器不支持。

下面是例子中css.wrapper中可以替换为

.wrapper{
width: 100%;
height: 26.66vw;
}
仅做学习记录
参考博：https://www.cnblogs.com/yuxingyoucan/p/9256544.html