图像创建在一个循环中：
<div id="row">
<div class="col-sm-6">
<div id="row">
<?PHP
foreach ($products as $product)
{
?>
<div class="col-sm-6">
<a href="/admin/product/" class="thumbnail">
<div class="caption">
title<br>
10 x viewed
</div>
<img src="/assets/img/product/<?PHP echo $product['img'] ?>" class="img img-responsive full-width" />
</a>
</div>
<?PHP
}
?>
</div>
</div>
</div>
这些图像来自不同的大小,一些比宽度高,有些则高于高度.如何强制所有图像与高度一样具有响应性.
对于他们来说,可以做到：100％,但是我不能使用height：auto,比例会保持不变.
我应该怎么做,使我的图像平方,而他们的响应,我不知道％.
例如,绿色的衬衫不如他的宽度那么高
我想这样做没有jquery所以CSS只有！
解决方法
你可以这样做 ：
>将图像包装在带有padding-bottom的容器中：100％;溢出：隐藏;位置：相对
>将图像绝对置于该容器内.
说明：
根据父元素的宽度,计算顶部/底部的顶部(如边缘顶部/底部).由于.image div与其父元素的宽度相同,因此设置padding-bottom：100％;给它与宽度相同的高度,因此它是平方的(其内容需要绝对定位或浮动,因此不会更改父级的大小).
HTML：
<div class="col-sm-6">
<a href="#" class="thumbnail">
<div class="caption">
title<br/>3 x bekeken
</div>
<div class="image">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
CSS：
.image{
position:relative;
overflow:hidden;
padding-bottom:100%;
}
.image img{
position:absolute;
}
