lundi 20 avril 2015

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>

Aucun commentaire:

Enregistrer un commentaire