給H5布局的時候一般都會碰到banner（橫幅）
比如要顯示成2比1 當然后端返回的圖片是2比1就好了 但事情往往不會那么如意 所以怎么辦呢 ？
寫死寬高總覺得不妥當
默認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整個的胡上去
完活 是不是覺得狠簡單 用就完了 ！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
