title: bootstrap thumbnail images same size
body: <p>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 <strong>ng-repeat</strong> to get a list of countries with their images and names. </p>
  
  <pre><code>&lt;style&gt;
    .thumbnail:hover{
      background: #f7f7f7;
    }
   .thumbnail img{
      border-radius: 100%;
      height: 98px;
      width: 137px;
      border:solid 1px #cccccc;
    }
  &lt;/style&gt;
  &lt;div class="row"&gt;
    &lt;div ng-repeat="team in $ctrl.teams"&gt;
      &lt;div class="col-sm-3 col-md-2"&gt;
        &lt;div class="thumbnail"&gt;
         &lt;a href=""&gt;
          &lt;img ng-src="{{team.imgpath}}"  alt="team"/&gt;
          &lt;div class="caption text-center"&gt;
            &lt;h4&gt;{{team.name}}&lt;/h4&gt;
          &lt;/div&gt;
         &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>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.</p>
  
  <p>What can I do to keep the content responsive using bootstrap and let the images be displayed with same size?</p>