Bootstrap CSS - 匹配宽度的图像容器高度

Question

我有一个引导网站，可以从数据库中动态加载内容，并使用这个jQuery插件延迟加载图像 - LazyLoad

它使用占位符，这是一个白色方形png。在图像加载之前（占位符可见），图像容器看起来我想要它，当图像完全加载时，它看起来也很好。但是，在加载图像时，布局会像这样折叠：

有没有办法设置图像容器的高度以匹配宽度？由于它是一个响应式网站，宽度将根据分辨率而变化。如果这有意义吗？

<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>

Answer 1

通过利用padding-top百分比引用元素宽度的事实，可以实现纯CSS响应解决方案。

.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: '';
}  

这是一个简短的演示：http://jsbin.com/lohoxa/5/edit