强制引导响应图像为正方形
强制引导响应图像为正方形
提问于 2014-05-01 08:17:28
图像是在循环中使用以下命令创建的：
<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%是可以的，但我不能使用高度:自动，那时比例将保持不变。我应该怎么做，使我的形象，而他们是响应性的，而我不知道的%。
例如，绿色的衬衫没有他的宽度那么高
我想在没有jquery的情况下做到这一点，所以只有CSS！
回答 5
Stack Overflow用户
回答已采纳
发布于 2014-05-07 20:56:17
您可以这样做：
padding-bottom:100%; overflow:hidden; position:relative
- position
- 将图像包装在容器中，并将图像完全放在该容器内。
说明:
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;
}Stack Overflow用户
发布于 2016-03-10 22:34:34
以下是适用于每种大小的图像http://jsfiddle.net/oboshto/p9L2q/53/的最佳解决方案
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;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}Stack Overflow用户
发布于 2014-05-01 08:27:10
您可以将每个图像包装在div中，然后将div的溢出设置为隐藏。只要div是方形的，那么你的图像就会被裁剪。div也可以响应。similar post
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23400232
复制相关文章
相似问题
腾讯云开发者
