title: How to scale image to fit the container?
body: <p>I have an image list, I want images scaled into their containers which have same size.
  like this:</p>
  
  <p><img src="https://i.stack.imgur.com/s9GRI.png" alt="a">
  <img src="https://i.stack.imgur.com/GCDqs.png" alt="b"></p>
  
  <p>I created a <a href="http://jsfiddle.net/68b3g7pw/" rel="noreferrer">jsfiddle</a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-3"&gt;
              &lt;a href="#" class="thumbnail"&gt;
                  &lt;img src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-3"&gt;
              &lt;a href="#" class="thumbnail"&gt;
                  &lt;img src="http://www.nose2tail.co.uk/cat-matlock-derbyshire.jpg"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-3"&gt;
              &lt;a href="#" class="thumbnail"&gt;
                  &lt;img src="http://www.us.onsior.com/images/3_1/cat-3_1-01.png"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-3"&gt;
              &lt;a href="#" class="thumbnail"&gt;
                  &lt;img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg" &gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>How can I do that?
  And in my example, I defined height: 100px;, this leads to not responsive, if I resize the browser, the div's height remain unchanged. If possible, I want this image list responsive.</p>