inline-block max-width not working in firefox [closed]

Question

I need to wrap several images inside a div width a static padding. Div must be horizontally centered. And I need it to be responsive, i.e. max-width of div (including padding) must be set to 100%.

<div class="content">
    <img src="http://placehold.it/350x150"/>
    <br/>
    <img src="http://placehold.it/250x150"/>
</div>

css:

body {
    text-align:center;
}
.content {
    padding:20px;
    background-color:red;
    display:inline-block;
}
img {
    max-width:100%;
    height:auto;
}

(http://jsfiddle.net/Nu8nV/)

This sample works fine in Chrome and Safari, but not in Firefox (images are cropped when scaling down the width). Has anyone a solution?

Answer 1

The .content element is displayed as inline-block, so its width depends on its children width.
In your case, its children ask for 350px, so it will always have a width of 350px even if the screen is smaller.

If it was a block element, its width will be the width of its parent. So the images will be resized when there will be not enough space on the screen. This is what happen on Chrome.

Demo with block

If you want your .content element still be displayed as an inline-block element, you could add the proprety max-width: 100%. With this you're telling it to never have a bigger width than its parent.

Demo with inline-block & max-width

This is not exactly what you want. The default box-model say that the visual width is the addition of width, padding and border. On tiny screens, the .content element has the width of its parent + its own padding.
Happily, you could change the box-model width the box-sizing property.

Demo with inline-block, max-width, and box-sizing