Bootstrap CSS - Thumbnail Image Resize & Responsive

Question

I'm developing an ecommerce app in Rails and using Bootstrap's thumbnail class to display product listings in category pages and widgets.

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 largest possible scaled version within the constrained height and width of the thumbnail container.

And the caption/price should be aligned accordingly.

here is a demo. scroll down. http://mktdemo.herokuapp.com/

I am looking for some css I can include on the thumbnail class to set this.

My html (with some ruby):

  <div class="row">
     <% @listings.each do |listing| %>
     <div class="col-md-3 col-xs-6">
        <div class="thumbnail" >
          <%= link_to image_tag(listing.image.url, class: "img-responsive"), listing %>
          <div class="caption">
             <h3><%= listing.name %></h3>
             <p><%= number_to_currency(listing.price) %></p>
         </div>
       </div>
     </div>
   <% end %>
 </div>

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.

.thumbnail {
   width: 260px;
   height: 300px;
  }

Solution 1

I posted this question. Just got notified that I got a badge because this question was viewed 1000+ times.

I had to set some settings within Imagemagick while loading the image. My site uses rails/paperclip but as long as you're using imagemagick, these settings below should work.

I figured this out and posted the answer here - Rails 4 - Imagemagick Resize to fill space

Solution 2

You can do this by creating divs for your gallery and use css to set the image as a background image. Then, use the property background-size. You can either use background-size: cover or background-size: contain. Setting the background-size: cover will scale the image so that it completely fills the background area while cutting off the excess. Setting background-size: contain will scale the image so that it maintains its original aspect ratio and fills the background without cutting off the image.

so your code must be looking something like this:

<div class="thumbnail img-responsive">
  <div class="cell" id="image1"></div>
    ......
</div>

And the css:

#image1{
  background: url("path");
  background-size:cover;
}

.thumbnail{
   width:250px;
   height:250px;
}

hope this helps :) good luck!