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

【问题标题】：Mobile Chrome browser displays different than other mobile browsers移动 Chrome 浏览器显示与其他移动浏览器不同
【发布时间】：2017-11-24 23:59:54
【问题描述】：

我正在尝试使用此机器人先生的封面图片构建一个响应式网页。它确实有效，只是移动 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 上的外观：

谢谢！

【问题讨论】：

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

可能对图片的大小进行限制...

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

这些数字只是估计值，我猜对你来说只是反复试验。祝你好运！

【讨论】：