图像在移动浏览器上延伸

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;