<style>
.box{
width:100%;
height:0;
overflow:hidden;
padding-bottom:24.6%;
}
img{
width:100%;
}
</style>

<div class="box">
   <img src="https://img1.qunarzz.com/order/comp/1805/2e/6e407f088bfb902.png">
</div>

重點在於圖片是100%自適應時，需要包裹一個盒子，並且這個盒子需要新增width:100%;height:0;overflow:hidden;padding-bottom:24.6%;屬性。 其中padding-bottom的值就是圖片本身的高/寬比例。 因為padding本身百分比寫法就是繼承的自身的寬度去算的。而heignt的百分比是繼承自父元素，所以使用height不合適。

可以保證在圖片未載入完成的時候，頁面佈局不亂。