CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
Moosa
Moosa

Reputation: 3216

CSS for Responsive Thumbnails

I'm using Rails, Bootstrap and Imagemagick for my app.

I have a thumbnail grid where the images uploaded are of different aspect ratios. See demo site at mktdemo.herokuapp.com. Images are resized to thumbnails by imagemagick to fit within a 200x200 space.

I wrote the css below so the thumbnails align consistently. Note that product name is aligned on all products though product imgs are of different aspect ratios. I'm happy with this output.

The problem is that since I'm using fixed pixel sizes, these are not responsive. How do I convert my css into %'s so they resize accordingly?

here is my html.erb

<div class="center">
  <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(:medium), class: "img-responsive aspect"), listing %>
            <div class="caption">
               <h3><%= listing.name %></h3>
               <p><%= number_to_currency(listing.price) %></p>
            </div>
          </div>
       </div>
     <% end %>
   </div>
</div>

Here is my CSS:

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

.thumbnail > img {
   width: 200px;
   height: 200px;
 }


.caption {
   width: 240px;
   height: 90px;
   position: absolute; bottom: 5px; 

  h3 {
     font-size: 17px;
     margin: 2px;
      }

  p {
    font-size: 15px;
    margin: 0px;
   }
}

EDIT: When I remove the thumbnail css above and the first 3 lines of the caption css, this is what happens - the product titles align with the image so are inconsistent. This is what I'm trying to fix.

enter image description here

Upvotes: 0

Views: 1163

Answers (2)

Milind
Milind

Reputation: 5112

instead of defining width/height for thumbnail..you can remove those definitions as you are already putting them in <div class="col-md-3 col-xs-6">.It means that irrespective of the image width/height...your grid will appear aligned and uniform.Moreover you are using img-responsive which well handle the responsiveness ONLY if your remove the height/width.Try removing it and change the browser height/width..it will work for sure.

----------------updated answer------------------------
even after removing you are unable to get the uniformity,so i have a solution where i wrap the individual divs into li with a some style,where they align uniformly even for irregular images of width/height.try this

<div class="center">
  <div class="row">
    ###added ul
     <ul style="list-style="none";>
     <% @listings.each do |listing| %>
       ##the li with float:left will remove all extra space caused by irregular images and 
       ##pull every image to left of screen hence aligning them good 
         <li style="float:left !important;width:auto;">
         <div class="col-md-3 col-xs-6">
           <div class="thumbnail" > 
             <%= link_to image_tag(listing.image.url(:medium), class: "img-responsive aspect"), listing %>
            <div class="caption">
               <h3><%= listing.name %></h3>
               <p><%= number_to_currency(listing.price) %></p>
            </div>
           </li>
          </div>
       </div>
     <% end %>
    <ul>
   </div>
</div>

Upvotes: 0

Joe Mike
Joe Mike

Reputation: 1170

Use this Meta Tag: in ur .aspx page

<meta name="viewport" content="width=device-width, initial-scale=1">

Refer this : http://getbootstrap.com/components/#thumbnails

Upvotes: 1

Related Questions