CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Lee
Lee

Reputation: 1495

Bootstrap CSS - Image container height to match width

I have a bootstrap website that loads content dynamically from a database and lazyload's the images using this jQuery plugin - LazyLoad

It uses a placeholder, which is a white square png. Before the image loads (while the placeholder is visible) the image container looks how I want it to, and when the image has fully loaded it looks good too. However while the image is loading the layout collapses like so:

enter image description here

Is there a way to set the height of the image container to match the width? With it being a responsive site the width will change depending on the resolution. If that makes sense?

<div class='col-xs-6 col-sm-3 col-md-3'>
  <div class='thumbnail'>
    <a href='my_url.html'><img class = 'lazy' data-original='http://external.png' alt='product_name'></a>
    <div class='caption' style = 'text-align: center;'>
      <div style = 'height: 60px;'>product_name<br />
            &pound;product_price</div>
      <p style = 'padding-top: 10px;'><a href='my_url.html' class='btn btn-primary btn-thumbp' role='button'>View</a> <a href='#' class='btn btn-default btn-thumbd' role='button'>Wishlist</a></p>
    </div>
  </div>
</div>

Upvotes: 2

Views: 948

Answers (1)

Nicolas Le Thierry d&#39;Ennequin
Nicolas Le Thierry d&#39;Ennequin

Reputation: 6154

A pure CSS responsive solution is possible by taking advantage of the fact that the padding-top percentages refer to the width of the element.

.thumbnail {
  outline: solid 1px blue;
  width: 250px; /* Any width */

}

.image {
  width: 100%;
  display: inline-block;
  position: relative;
  outline: solid 1px red;
}

.image:after {
  padding-top: 100%;
  display: block;
  content: '';
}

Here's a short demo: http://jsbin.com/lohoxa/5/edit

Upvotes: 1

Related Questions