引導縮略圖大小相同

Question

我正在使用引導程序縮略圖，其中每個都包含圖像和標題。 問題是圖像的大小不一樣，我希望它們以相同的大小顯示，以使縮略圖具有相同的大小。 我正在使用angular 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> 

我為高度和寬度設置了固定值，但是，由於圖像原本不具有相同的尺寸，因此它們無法以相同的尺寸顯示。

如何使用引導程序使內容保持響應並使圖像以相同大小顯示？

Answer 1

Bootstrap使用兩個類來定位縮略圖：

.thumbnail img和.thumbnail a > 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>