轻松实现固定比例的块级容器

给H5布局的时候通常都会碰到banner（横幅）
好比要显示成2比1 固然后端返回的图片是2比1就行了 但事情每每不会那么如意 因此怎么办呢 ？

1. 写死宽高总以为不稳当
2. 默认width: 100%;让height自适应呢 图片会慢慢撑开（产品经理就会说这样用户体验很差 我TM就是用户 我就以为挺好）

• 方法来了

.banner-wrapper {
            position: relative;
            width: 100%;
            padding-top: 50%;
        }

        .banner {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        
        <div class="banner-wrapper">
            <img class="banner" src="./img/portfolio/cabin.png" alt="">
        </div>

• 下面说明一下

padding-top: 50%;是个关键 用百分比写padding是相对自身的宽的（别问我为何 事实就是这样）
因此width: 100%; padding-top: 50%;就会完美呈现出一个2比1的盒子
最后把img整个的胡上去
完活 是否是以为狠简单 用就完了 ！