title: Is it possible to center an image inside a wrapper with an overflow hidden?
body: <p>I need my thumbnail to fill in the space of the container which is 100x100px. But I have some landscape images that I would like to have centered inside so they get cropped of left and right side. Is it possible to achieve this without using a background image.</p>
  
  <p>Here is what I have so far: </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="thumbnail"&gt;
          &lt;img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=350&amp;h=150" alt="" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.outer {
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid grey
  }
  
  .thumbnail {
    overflow: hidden
  }
  
  img {
    width: auto;
    height: 100px;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/ingvi/pen/JYjBNP?editors=110" rel="nofollow">http://codepen.io/ingvi/pen/JYjBNP?editors=110</a></p>