bootstrap缩略图图像大小相同
我使用引导程序缩略图,其中每个引导程序都包含图像和标题。 问题是图像尺寸不一样,我希望它们显示的尺寸相同,以使缩略图具有相同的尺寸。我正在使用角度ng-repeat以获取具有图像和名称的国家列表。bootstrap缩略图图像大小相同
<style>
.thumbnail:hover{
background: #f7f7f7;
}
.thumbnail img{
border-radius: 100%;
height: 98px;
width: 137px;
border:solid 1px #cccccc;
}
</style>
<div class="row">
<div ng-repeat="team in $ctrl.teams">
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="">
<img ng-src="{{team.imgpath}}" alt="team"/>
<div class="caption text-center">
<h4>{{team.name}}</h4>
</div>
</a>
</div>
</div>
</div>
</div>
我设置固定的高度和宽度值,但是,图像不具有相同的尺寸,因为它们不是原本具有相同尺寸显示。
如何使用bootstrap保持内容响应并让图像以相同大小显示?
引导使用两类目标缩略图:
.thumbnail img
和.thumbnail a > img
您需要使用具有较高的特异性(.thumbnail a > img
)的一个,这样你的风格不被覆盖。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.thumbnail:hover {
background: #f7f7f7;
}
.thumbnail a > img {
border-radius: 100%;
height: 98px;
width: 137px;
border: solid 1px #cccccc;
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="">
<img src="http://placehold.it/125x70" alt="team">
<div class="caption text-center">
<h4>{{team.name}}</h4>
</div>
</a>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="">
<img src="http://placehold.it/250x140" alt="team">
<div class="caption text-center">
<h4>{{team.name}}</h4>
</div>
</a>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="">
<img src="http://placehold.it/125x70" alt="team">
<div class="caption text-center">
<h4>{{team.name}}</h4>
</div>
</a>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="">
<img src="http://placehold.it/75x25" alt="team">
<div class="caption text-center">
<h4>{{team.name}}</h4>
</div>
</a>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="">
<img src="http://placehold.it/125x70" alt="team">
<div class="caption text-center">
<h4>{{team.name}}</h4>
</div>
</a>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="">
<img src="http://placehold.it/125x70" alt="team">
<div class="caption text-center">
<h4>{{team.name}}</h4>
</div>
</a>
</div>
</div>
</div>
</div>
完美的解决方案:) – EddyG
太棒了!注意我删除了我的评论,因为它们是基于我造成的错误并且不再有效。 – hungerstar
谢谢@hungerstar! :)会注意到这一点 – Hardik
如果使用angularjs,** NG重复**被用来显示不同的内容相同的结构,在这里我得到国家的数组,每个国家我展示其内容在缩略图中。问题img的国家有不同的大小,即使我设置固定的高度和宽度,bootstrap不显示它们相等。 – EddyG
在你的例子中,你有pic1 [height:125,width:125],pic2 [height:250,width:250],其中width = height。我的图片没有宽度=高度。我有pic1 [height:393,width:550]和pic2 [height:369,width:550]。大致相同的宽度与不同的高度。 – EddyG
我创建了另一个小提琴,希望这可以帮助https://jsfiddle.net/y12rgpdL/ – Hardik