宽高等比例缩放元素CSS

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

<div class="scale">
    <div class="banner">
        元素
    </div>
</div>

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

模具

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

.scale {
    width: 100%; // 宽度100%同步父元素宽度，是为了随外部元素宽度自适应
    padding-bottom: 20%; // padding-bottom值为半分比时受父元素宽度影响，20%就是相对于父元素宽度的20%，其实自适应等比例的宽高主要是保证宽高比一定，利用padding-bottom百