Question

我正在使用bootstrap缩略图，其中每个包含图像和标题。问题是图像大小不同，我希望它们显示的大小相同，以使缩略图具有相同的尺寸。我使用有角度的 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>

我为高度和宽度设置了固定值，但是，图像不会以相同的尺寸显示，因为它们最初没有相同的尺寸。

如何使用bootstrap保持内容响应并让图像以相同的大小显示？

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>

引导缩略图图像大小相同

1 个答案: