輕鬆實現固定比例的塊級容器

給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整個的胡上去
完活 是否是以爲狠簡單 用就完了 ！