Mobile Chrome browser displays different than other mobile browsers

Question

I am trying to build a responsive webpage with this image of the cover of Mr Robot. It actually does work, only the mobile Chrome browser makes trouble.

As you can see on the second image below, the cover image is slightly hanging over the right end of the screen and I don't know why.
Does someone has a clue why Chrome is making trouble in this case?

Here's the code I used:

HTML

    <div class="wrapper">

      <img src="..." class="cover">

    </div>

CSS

  .wrapper img.cover {

    max-height: 100%;

    max-width: 100%;

    text-align: center;

  }

How it looks on Safari, Firefox and Opera:

How it looks on Chrome:

Thank you!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Try this one

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

Mobile Chrome browser displays different than other mobile browsers

Sign up