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保持內容響應並讓圖像以相同大小顯示？

來源

2017-03-17 EddyG

如果使用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

引導使用兩類目標縮略圖：

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

來源

2017-03-17 17:10:10 hungerstar

完美的解決方案:) – EddyG

太棒了！注意我刪除了我的評論，因爲它們是基於我造成的錯誤並且不再有效。 – hungerstar

謝謝@hungerstar！ :)會注意到這一點 – Hardik

bootstrap縮略圖圖像大小相同

回答

相關問題