CODEWITHSUNDEEP
jqueryhtmlcssangularjstwitter-bootstrap
EddyG
EddyG

Reputation: 2119

bootstrap thumbnail images same size

I am using bootstrap thumbnail where each contain an image and a heading. The problem is that images are not same size, and I want them to be displayed having an equal size to make the thumbnails have the same dimensions. I am using angular ng-repeat to get a list of countries with their images and names. 

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

I set fixed values for height and width, however, the images are not displayed with same size since they are not originally having the same sizes.

What can I do to keep the content responsive using bootstrap and let the images be displayed with same size?

Upvotes: 0

Views: 3126

Answers (1)

hungerstar
hungerstar

Reputation: 21685

Bootstrap uses two classes to target thumbnail images:

.thumbnail img and .thumbnail a > img

You need to use the one with the higher specificity (.thumbnail a > img) so your styles don't get overwritten.

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

Upvotes: 2

Related Questions