引导CSS - 图像容器高度符合宽度

我有一个引导的网站，从数据库中动态地加载内容和lazyload是使用这个jQuery插件的图像 - LazyLoad 引导CSS - 图像容器高度符合宽度

它使用一个占位符，这是一个白色的方形PNG。在图像加载之前（当占位符可见时）图像容器看起来如何我想要它，当图像完全加载时它看起来也很好。然而当图像加载布局倒塌像这样：

enter image description here

有没有一种方法来设置图像容器的高度与宽度？由于它是一个响应网站，宽度将根据分辨率而变化。如果这有道理？

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

来源

2015-04-20 Lee

纯CSS响应的解决方案是通过利用以下事实padding-top百分比是指所述元件的宽度的优点成为可能。

.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

来源

2015-04-20 12:43:11

引导CSS - 图像容器高度符合宽度

回答

相关问题