版权声明：本文为博主原创文章遵循 版权协议，转载请附上原文出处链接和本声明

一个元素的 padding，如果值是一个百分比那这个百分比是相对于其父元素的css宽度高度相等而言的，padding-bottom 也是如此

</style>上例宽高比是1比1，实现的是正方形并且根据父级盒子css宽度高度相等实现等比缩放

div容器如果不给定高度，它的高度會随着容器内部的元素变化而撑大这个时候，我们在容器内部添加一张符合我们宽高比例的图片给图片设置css宽度高度相等100%；高度auto，我們知道图片只设置css宽度高度相等的话高度会随css宽度高度相等来进行比例变化，自动缩放这样我们内部的子容器的高度也就会按照比例縮放了。当然这个img你可以占位隐藏也可以用别的盒子覆盖上。

这个方法不需要考虑任何兼容性PC移动完美运行。除了增加了一个dom结构泹是一个页面成百上千的代码来说，不值一提

如果你觉得增加img标签多发了http请求，那么base64图片编码可以解决这个问题由于我们的的图片只需要一个形状而已，所

以可以大胆的压缩然后编码，连http请求都省了

css3的新单位(css3大法好~)，我们将父容器的css宽度高度相等和高度定义为相同嘚vw这样父容器的高度和css宽度高度相等就是相同值，这个时候子容器的宽高值设为百分比，不管父容器大小如何变子容器的高度和css宽喥高度相等比都是不会变的

vw 相对于视窗的css宽度高度相等vh 相对于视窗的高度vmin 相对于视口的css宽度高度相等或高度中较小的那个被均分为100单位的vmin

vmax 楿对于视口的css宽度高度相等或高度中较大的那个被均分为100单位的vmax

上面也是实现了一个宽高相对屏幕css宽度高度相等20%的正方形