Liquid Layout: 100% max-width img not applied - why?

Question

I'm totally new to this liquid layout stuff. I've notice, as most of us, that while most of my layout components "liquify", images, unfortunately, don't.

So I'm trying to use the max-width: 100% on images as suggested on several places.

However, and despite the definition of max-width and min-height of the img container, the img don't scale.

If you see it on a wide resolution, you would notice that the "kid image", for example, don't scale.

Any clue about what could the issue be, why does that image not scale?

Test case:

Browsers: Firefox 15.0 / Chrome 21.0

IOS: MAC OS X Lion - 10.7.3

Resolution: 1920x1200

What I get: I get an image that doesn't scale until the end of it's container. The img width won't fit the article element that contains it.

What I do expect: I expect the image to enlarge, until it reaches the end it's container. Visually, I'm expecting the image to be as wide as the paragraph immediately below, in a way that, the right side of the image stays vertically aligned with the right side of the paragraph below.

Answer 1

I think you misunderstand what max-width does.

max-width:100% means "the maximum width this element can be is 100% of it's container". Anything that's naturally smaller will not be affected. That's what you have now and it's working properly. If you used max-width:800px, it would mean "never let this image be more than 800px wide", it wouldn't force an 800px width, that's what width is for.

width:100% means "this element should always be 100% width of it's container". Anything that would normally be smaller must now take up the entire width. Anything bigger will shrink to the container's width.

For your case, just use width:100% and size your actual images to fit the actual maximum (and pick a reasonable maximum width for the container). Images usually look better when scaled down than scaled up, but when optimizing for mobile devices you might want to do the opposite.

The reason you usually see max-width:100% as a default style is so images don't extend beyond their containers and break the layout, since images are usually sized naturally by their actual width.

Answer 2

For me your images are scaling with resizing the viewport. But instead of max-width, use just width. But it works with both.

Answer 3

As far as my understaning is consern if i have a image of 300px width (means image is created as such with width of 300px)

Now this image is inside a div whose width is say 40% of its container (which is body in my case)

if i give my img widht:100% it means say if my div is of 500px (40% of whole body width) width my image will be of same width as its container (div in my case).

if i give img max-width:100% it means my image's maximum width will always be 300px (in other word what ever its original width is when it got created)

max-widht really helps in maintaining px clarity of your image