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>
.wrapper img.cover {
max-height: 100%;
max-width: 100%;
text-align: center;
}
Try this one
.wrapper{
width: 100%;
padding: 15px;
box-sizing: border-box;
}
.wrapper img{
max-width: 100%;
height: auto;
}