实现一个宽高比5/1的自适应元素

<div>
    <div>
        元素
    </div>
</div>

其实这个等比缩放的关键在于这个.scale元素，因为他的padding-bottom具有宽高联动的效果，所以就让这个元素成为一个模具，让真正要缩放的元素装入这个模具中，宽高跟随这个模具变化，就可以实现等比缩放的效果了

模具

padding-bottom: 20% 就是父元素宽度的20%，同时设定width：，其实padding-bottom就跟随width的大小比例走了，我们可以让padding-bottom来撑起元素的高度，所以height：0是为了把元素的高度完全交给padding-bottom，高度(padding-bottom)与宽度(width)保持一定的比例了，剩下的就让目标元素注入到模具中就可以了。

.scale {
    width: ; // 宽度同步父元素宽度，是为了随外部元素宽度自适应
    padding-bottom: 20%; // padding-bottom值为半分比时受父元素宽度影响，20%就是相对于父元素宽度的20%，其实自适应等比例的宽高主要是保证宽高比一定，利用padding-bottom百分比的这一特点就能实现宽高的联动
    height: 0; // 设定为0是为了高度让padding-bottom来撑起
    position: relative; // 让该元素成为一个能等比缩放的"模具", 让子元素的宽高都跟随这个元素变动，就能实现子元素的等比缩放了。
    .banner {
        position: absolute; // 跟随父元素"模具"
        width: ; // 跟随模具的宽
        height: ; // 跟随模具的高
        background-color: 499e56;
    }
}

max-width

虽然容器的内容高度为 0，但由于有了跟内容宽度一致的 padding，因此整体视觉效果上像是被撑开了。此方案浏览器兼容性很不错，的缺陷是无法给容器设置max-height属性了，因为max-height只能限制内容高度，而不能限制 padding（因为max-width的成立条件是高度要由内容撑起），但是内容是被自身的padding撑起的，所以这时需要一个伪元素来充当这个模具。

.scale {
    width: ;
    position: relative;
    // overflow: hidden; 如果由margin撑起高度，则要考虑多个margin上下重叠问题，通过触发BFC来消除这一点
}
​
.scale:after {
    content: '';
    display: block;
    padding-top: 20%; // 这里的比例是相当于模具元素自身来说的，由于宽高比是5:1，所以自身宽度比上伪元素的padding-top也应该是5:1，所以这里要设为 /(5/1) 为20%；
}
​
.banner {
    position: absolute;
    width: ;
    left: 0;
    top: 0;
}