在移动端显示高度与屏幕宽度相等的图片

<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的值为百分数时，其是基于父元素宽度的百分比上内边距。这样一来至关因而给图片的显示创造了一个高度与屏幕宽度相等的区域。