title: Bootstrap CSS - Thumbnail Image Resize & Responsive
body: <p>I'm developing an ecommerce app in Rails and using Bootstrap's thumbnail class to display product listings in category pages and widgets.</p>
  
  <p>My images are of different sizes. I want to fix the thumbnail container to some height and width (responsive) and then resize the images to be the <strong>largest possible scaled version</strong> within the constrained height and width of the thumbnail container.</p>
  
  <p>And the caption/price should be aligned accordingly.</p>
  
  <p>here is a demo. scroll down. <a href="http://mktdemo.herokuapp.com/" rel="nofollow">http://mktdemo.herokuapp.com/</a></p>
  
  <p>I am looking for some css I can include on the thumbnail class to set this.</p>
  
  <p>My html (with some ruby):</p>
  
  <pre><code>  &lt;div class="row"&gt;
       &lt;% @listings.each do |listing| %&gt;
       &lt;div class="col-md-3 col-xs-6"&gt;
          &lt;div class="thumbnail" &gt;
            &lt;%= link_to image_tag(listing.image.url, class: "img-responsive"), listing %&gt;
            &lt;div class="caption"&gt;
               &lt;h3&gt;&lt;%= listing.name %&gt;&lt;/h3&gt;
               &lt;p&gt;&lt;%= number_to_currency(listing.price) %&gt;&lt;/p&gt;
           &lt;/div&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;% end %&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I've tried the below but this only fixes the container size, not the image or the caption alignment. And since I'm fixing the height and width, it's likely not responsive either.</p>
  
  <pre><code>.thumbnail {
     width: 260px;
     height: 300px;
    }
  </code></pre>