부트 스트랩 썸네일 이미지 같은 크기

Question

각각 이미지와 제목이 포함 된 부트 스트랩 썸네일을 사용하고 있습니다. 문제는 이미지가 같은 크기가 아니며 크기가 같아서 축소판의 크기가 동일하게 표시되도록하려는 것입니다. 이미지와 이름이있는 국가 목록을 보려면 ng-repeat이라는 각도를 사용하고 있습니다.

I는 너비와 높이 값을 고정 된

<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

부트 스트랩은 미리보기 이미지를 대상으로 두 개의 클래스를 사용합니다.

@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-반복 ** 다른 콘텐츠와 동일한 구조를 표시하는 데 사용됩니다