纯css实现容器高度随宽度等比例变化的两种解决方案

1、padding-bottom实现

这里方法非常巧妙，由于padding-bottom的属性值百分比是按照父容器的宽度来计算的，所以这里我们设置容器宽度为父容器的50%；padding-bottom也为50%；就都是父容器宽度的50%；显示出来就是一个完美的正方形了。

<style type="text/css">
#container {
    width: 80%;
    height: 500px;
}

.box{
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #008b57;
}
</style>

<div id='container'>
    <div class='box'></div>
</div>

2、使用一个隐藏的图片来实现

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

我们知道，div容器如果不给定高度，它的高度会随着容器内部的元素变化而撑大，这个时候，我们在容器内部添加一张符合我们宽高比例的图片，给图片设置宽度100%；高度auto。不管我们的父容器如何变化，内部的img宽度都是100%，图片是会严格按照比例i自动缩放的，相应的，我们内部的子容器的盖度也就会按照比例缩放了。

    <style>
        #container {
            width: 100%;
            background: #000000;
        }

        #container img {
            width: 100%;
            height: auto;
        }
    </style>

    <div id='container'>
        <img src="./white.png" alt="">
    </div>

相比较而言，设置后，这里父容器的高度会比图片的高度多出来一点点，所以在使用上会存在一定的误差。