ブートストラップサムネイル画像同じサイズ

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> 

。

ブートストラップを使用してコンテンツを反応させ、画像を同じサイズで表示させるにはどうすればよいですか？

.thumbnail imgとあなたはそう、あなたのスタイルが上書きされないより高い特異性（.thumbnail a > img）とのいずれかを使用する必要が.thumbnail a > img

：

Answer 1

ブートストラップは、サムネイル画像を対象とする2つのクラスを使用しています。

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

あなたがangularjsを使用する場合は、** NG-repeatが**異なる内容と同じ構造を表示するために使用される