1. 程式人生 > >通欄banner自適應各個設備

通欄banner自適應各個設備

ann ack 判斷 自適應 clas jpg idt src -s

思路:圖片不要設置為div的background,因為你設置了background-size,但是div的height沒設置一樣沒用,除非你搞個js判斷,動態刷新。

換一種思路,直接用<img>顯示出來,這樣div作為父容器就被你撐大,就不需要div的高度設置了。然後就看你的圖片,如果寬要全部顯示,就設置為width:100%; height:auto; 反之就設置為width:auto; height:100%;

<div class="banner">
    <img src="banner.jpg"/>
</div>

  

.banner { width:100%; }
.banner img { width:100%; height:auto; }

  

通欄banner自適應各個設備