bootstrap缩略图图像大小相同

Question

我使用引导程序缩略图，其中每个引导程序都包含图像和标题。 问题是图像尺寸不一样，我希望它们显示的尺寸相同，以使缩略图具有相同的尺寸。我正在使用角度ng-repeat以获取具有图像和名称的国家列表。

<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保持内容响应并让图像以相同大小显示？

Answer 1

引导使用两类目标缩略图：

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