移动Chrome浏览器显示与其他移动浏览器不同

Question

我正在尝试建立一个响应式网页，上面有机器人先生的封面图片。它确实有效，只有移动Chrome浏览器会出错。

正如您在下面的第二张图片中看到的那样，封面图片略微悬挂在屏幕的右端，我不知道为什么。 有人知道为什么Chrome在这种情况下会遇到麻烦吗？

这是我使用的代码：

HTML

    <div class="wrapper">
      <img src="..." class="cover">
    </div>

CSS

  .wrapper img.cover {
    max-height: 100%;
    max-width: 100%;
    text-align: center;
  }

它在Safari，Firefox和Opera上的外观：

Chrome浏览器的外观：

谢谢！

Answer 1

试试这个

.wrapper{
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}
.wrapper img{
  max-width: 100%;
  height: auto;
}

Answer 2

可能会限制图片的大小...

<div class="wrapper">
  <img src="..." class="cover" style="width:300px;height:800px;">
</div>

这些数字只是估计数，我猜测只是试验和错误。 祝你好运！