利用padding-top/padding-bottom百分比，进行占位和高度自适应

width:100% ;
height:0;
padding-top:70%

作用：

 1. 宽高自适应，高度恒为宽度的70% （padding-top:50% ，则高度恒为宽度的一半）

 2. 占位，提高加载图片时性能

 

说明：

在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度。

比如：父元素宽度是100px, 子元素padding-top:50%，那么padding-top的实际值就是100*50%=50px

这个小小的知识点，其实有很大的用处，应用也很广泛，就是进行提前占位，避免资源加载时候的闪烁，还可以让高度自适应。

举例：

一般来说，想要自适应屏幕大小，我们设置元素的宽度自适应是完全没有问题的，比如希望一行显示5个元素，那么我们设置每个元素width:20%就可以了（box-sizing需要为border-box）。

但是高度就比较尴尬了，因为高度都是被内容撑开的，一般不定，那么通过百分比来设置高度，就变得不是很实用。

而且，对于图片等资源来说，加载是需要时间的，即便网页加载速度已经很快了，由于高度被图片撑开的过程，不可避免会出现闪烁，这时候我们的padding-top等就发挥大用处

https://blog.csdn.net/qq_42564846/article/details/81141037