在移動端顯示高度與屏幕寬度相等的圖片

<div class="image-wrapper">
    <img src="#">
</div>

.image-wrapper {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 100%;
}
.image-wrapper img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}

此方法的技巧在於圖片外層容器的padding-top值爲100%，當padding的值爲百分數時，其是基於父元素寬度的百分比上內邊距。這樣一來至關因而給圖片的顯示創造了一個高度與屏幕寬度相等的區域。