title: Resize and align a picture within a div
body: <p>How can I resize and align a picture within a div?</p>
  
  <p>I need to show resized images on a 50x50px div. I also want them to be centralized on the div. I've made this image below to show exactly what i want to do.</p>
  
  <p><img src="https://i.stack.imgur.com/5h8TK.jpg" alt="enter image description here"></p>
  
  <p>The problem in that the CSS needs to work when the image is larger on width, and when it's larger on height.</p>
  
  <p>I've found this solution using max-width or max-height, but it only works for one option (larger width, or larger height):</p>
  
  <pre><code>div.img-crop-thumb
  {
      width: 50px;
      height: 50px;
      position: relative;
      overflow: hidden;
  }
  .img-crop-thumb img
  {
      position: absolute;
      top: 0px;
      left: -50%;
      max-width: 30px;
      height: auto;
  }
  </code></pre>