給H5佈局的時候通常都會碰到banner(橫幅)
好比要顯示成2比1 固然後端返回的圖片是2比1就行了 但事情每每不會那麼如意 因此怎麼辦呢 ?後端
.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整個的胡上去
完活 是否是以爲狠簡單 用就完了 !app