title: Browser Do Not Take Care Of IMG Element Based Size
body: <p>I have been experimented this problem recently;</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="column"&gt;
          &lt;img id="first" width=275 height=385 src="flower-275x385.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;img id="second" width=100 height=400 src="flower-275x385.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;img id="third" width=500 height=150 src="flower-275x385.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;img id="fourth" width=75 height=150 src="flower-275x385.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;img id="fifth" width=750 height=550 src="flower-275x385.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
      .row {
          width:100%;
          overflow:hidden ;
      }
      .column {
          width:20% ;
          float:left ;
      }
  
      .column img {
          width:100% ;
          height:auto ;
      }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>On HTML side there is many different sizes for same image,<br>
  But browser only take care of <strong>image natural sizes</strong>,<br>
  This is why all images rendered same size on result side in JSFiddle,<br>
  Hot to force browser to take care of HTML based width/height?</p>
  
  <p>Here is the <a href="http://jsfiddle.net/akkara/e2jQD/2/" rel="nofollow">JSFiddle</a> of it.</p>
  
  <p><strong>Edit:</strong> It seems there is no way do it without JS: <a href="http://jsfiddle.net/akkara/e2jQD/12/" rel="nofollow">My Solution</a>, thanks for advices above there!</p>