通栏banner自适应各个设备

Posted 2020-10-16 carrie_zhao

思路：图片不要设置为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; }