title: How to display the center of an image in a thumbnail
body: <p>This is probably something very simple, yet I can't seem to figure it out. I am working on an image gallery where the images are sometimes in the portrait and sometimes in the landscape mode. For the gallery to look uniform, I need the thumbnails to be the same size and only upon a click, the full image will be displayed. I'm using Zurb Foundation and SCSS.
  This is my code at the moment:</p>
  
  <pre><code>&lt;div class="img-single column column-block"&gt;
     &lt;a data-open="galleryModal"&gt;
     &lt;img src="assets/img-01.jpg" class="thumbnail" alt=""&gt;
     &lt;/a&gt;
  &lt;/div&gt;
  
  .img-single {
      width: 300px;
      height: 300px;
  
      img {
          width: 100%;
          height: 100%;
      }
  }
  </code></pre>
  
  <p>At the moment, the image stretches to be 300px by 300px. I just need to display a thumbnail of the image with the image's centre to be displayed, and not distorted. I also tried adding <code>vertical-align: middle;</code> and played with max-width and max-height values, but it didn't do anything. How can it be done?</p>