css实现固定长宽比布局

HTML结构

使用CSS实现容器长宽比，常见的HTML模板结构有两种：

<div class="aspectration" data-ratio="16:9"> 
    <div class="content"></div> 
</div>

另外一种结构是：

<div class="aspectration" data-ratio="16:9"> </div>

具体使用的时候，根据自己使用场景采用不同的结构。

垂直方向的padding

这是最早提出的一种实现方案，主要借助的原理是利用padding-top或者padding-bottom的百分比值，实现容器长宽比。在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。如此一来就很好的实现了容器的长宽比。采用这种方法，需要把容器的height设置为0。而容器内容的所有元素都需要采用position:absolute，不然子元素内容都将被padding挤出容器（造成内容溢出）。

比如我们容器的长宽比是16:9，那么根据计算：100% * 9 / 16可以得到56.25%。如果你希望的是4:3，那么对应的就是100% * 3 / 4。

具体的CSS代码如下：

        .aspectration{
            background: #abcdef;
            width: 100%;
            height: 0;
            padding-top: calc(100% * 9/16);
            position: relative;
        }
        .content{
            width: 100%;
            height: 100%;
            background: yellow;
            position: absolute;
            top: 0;
            left:0;
        }