title: Liquid Layout: 100% max-width img not applied - why?
body: <p>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.</p>
  
  <p>So I'm trying to use the <code>max-width: 100%</code> on images as suggested on several places.</p>
  
  <p>However, and despite the definition of <code>max-width</code> and <code>min-height</code> of the img <strong>container</strong>, the <strong>img</strong> don't scale.</p>
  
  <p>If you see it on a wide resolution, you would notice that the "kid image", for example, don't scale.</p>
  
  <p>Any clue about what could the issue be, why does that image not scale?</p>
  
  <p><strong>Test case:</strong></p>
  
  <p>Browsers: <em>Firefox 15.0</em> / <em>Chrome 21.0</em></p>
  
  <p>IOS: <em>MAC OS X Lion - 10.7.3</em></p>
  
  <p>Resolution: <em>1920x1200</em></p>
  
  <p><strong>What I get:</strong>
  I get an image that doesn't scale until the end of it's container.
  The img width won't fit the <code>article</code> element that contains it.
  <img src="https://i.stack.imgur.com/1dsob.jpg" alt="image should scale as the arrow indicates"></p>
  
  <p><strong>What I do expect:</strong>
  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.</p>