title: Using bootstrap to create grid with "dynamic" image sizing
body: <p>Still brand new to CSS, so please be gentle ;). I have a grid setup like the following:</p>
  
  <pre><code>&lt;div class="row"&gt;
       &lt;div class="col-lg-2 col-sm-3 col-xs-4"&gt;
         &lt;a href="#" class="thumbnail"&gt;
            &lt;img src="http://placehold.it/150x150" class="img-responsive"&gt;
         &lt;/a&gt;
       &lt;/div&gt;
       &lt;div class="col-lg-2 col-sm-3 col-xs-4"&gt;
          &lt;a href="#" class="thumbnail"&gt;
            &lt;img src="http://placehold.it/150x150" class="img-responsive"&gt;
          &lt;/a&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is when I actually fill the src with an image, I want the image to actually compeltely "fill" the placeholder no matter what the image size is. I guess in other words, a ratio should be applied so it fills the 150x150? The width (max-width: 100%) is fitting, but the height is auto. I've tried adjusting height, width, max-height, etc. with no success.</p>