javascript - 图片在移动浏览器上拉伸(stretch)

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;