img with max-width:100% is exceeding container width

[ianevans]

I have an image with the class boxart inside a variable width div.

<div>
<img class="boxart' src=/gfx/photo.jpg />
</div>

The css for boxart is:

.boxart {
max-width:100%;
margin:auto
} 

When the page is displayed on a phone, the image exceeds the container's width by a few pixels. I know I'm probably too tired to notice what I'm missing, but shouldn't max-width:100% have prevented that?

[not2easy]

The container's width (and the viewport/device pixel ratio) is what decides the pixels available for 100% assigned to the image - but in this case it could be just syntax if the example shown was copy/pasted verbatim from the html.
This:

<div>
<img class="boxart' src=/gfx/photo.jpg />
</div>

should be:

<div>
<img class="boxart" src="/gfx/photo.jpg" alt="" />
</div>

Too tired can do that.

[ianevans]

Actually I didn't cut and paste. Thought about posting here when I couldn't sleep and just typed it by hand. In production, the syntax is fine and the image still exceeds the box by a few pixels.

Later I'll fire up Chrome on the desktop and inspect the elements and see what is actual sizes it's reporting. Will update.

[ianevans]

Checked in Chrome under Win10. Shrunk the window down to phone size and the image stayed within its container. So it's just \Chrome Android that the image is a few pixel bigger than the container. Odd.

[lucy24]

What’s the
margin:auto
for? Seems like if you want the image to go to 100%, it would be safer to set the margin--or at least the left and right margin--to 0. Otherwise you may find browsers deciding that some calculated value is appropriate instead, resulting in the overflow you observe.