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.

Sample code:

CSS

img {
    max-width: 100%;
}

article {
    float: left;
    margin: 30px 1%;
    max-width: 31%;
    min-height: 350px;
}

HTML

<article>
    <header>
        <h2>some header</h2>
    </header>
    <img src="/images/thumb1.jpg" alt="thumb">
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
    posuere cubilia Curae; Proin vel ante a orci tempus eleifend.</p>
</article>

Please have a look on the following link: http://tinyurl.com/d849f8x

If you see it on a wide resolution, you will 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.