大佬教程收集整理的这篇文章主要介绍了css – 强制自适应图像为正方形，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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; }
以上是大佬教程为你收集整理的css – 强制自适应图像为正方形全部内容，希望文章能够帮你解决css – 强制自适应图像为正方形所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。