使用CSS 画一个宽高比例16：9或其他的比例的盒子的一种方案

/*css代码 */
        .container{   /*这个盒子用来承载16：9盒子 */
            border: 1px solid black;
            margin: 0 auto;
            height: 300px;
            width: 500px;
        }
        .box{     /*16：9盒子 */
            padding-top: 56.25%;   /*这里利用了padding计算根据父盒子宽度的规则 */
            width: 100%;          /*1这里将子盒子的宽度设置为父盒子的100% */
            height: 0;   /*将高度设置为0 */
            background: red;
        }

    <!-- html结构 -->

<div class="container">
        <div class="box"></div>
</div>

        上述代码实现的方式利用了padding根据父盒子宽度计算的规则，并将子盒子宽度设置为父盒子的100%。高度设置为0。现在盒子的真实宽高如下：

       

 

        这里利用了标准盒子模型的特性，会将盒子的padding计算到盒子的大小中。

        我们如果想在后续使用这个比例为16：9的盒子，可以内嵌一个宽高都设置为100%的子盒子。

页面效果