引导缩略图图像相同大小

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)，这样您的样式就不会被覆盖。

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