图像在移动浏览器上延伸

Question

[电话上的图片与计算机设备上的图片不一样。

如图片所示，高度在移动浏览器中被拉伸。

电话上的计算机上的|（iPhone 6s，Safari和Chrome浏览器中也会发生同样的事情🡒

HTML

<div class="pic-wrapper">
    <img src="img.png">
</div>

CSS

.pic-wrapper {
  margin-bottom: 30px;

  /* needed for hover effect */
  position: relative; 
  overflow: hidden;
}

.pic-wrapper img {
  width: 100%;
  height: auto;
}

知道为什么会这样吗？

Answer 1

http://codepen.io的示例下一次会很不错...

尝试删除：height: auto;