html - 移动 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;
}