How to display the center of an image in a thumbnail

Question

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:

<div class="img-single column column-block">
   <a data-open="galleryModal">
   <img src="assets/img-01.jpg" class="thumbnail" alt="">
   </a>
</div>

.img-single {
    width: 300px;
    height: 300px;

    img {
        width: 100%;
        height: 100%;
    }
}

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 vertical-align: middle; and played with max-width and max-height values, but it didn't do anything. How can it be done?

Answer 1

You may take advantage of the new object-fit CSS property and make the image appear as you want.

Here is some example code for you, showing the difference between the image placed using object-fit and the default image:

.img-single {
  display: inline-block;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.img-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="img-single column column-block">
  <a data-open="galleryModal">
    <img src="https://unsplash.it/458/354?image=0" class="thumbnail" alt="Image with object-fit" title="Image with object-fit">
  </a>
</div>

<img src="https://unsplash.it/458/354?image=0" alt="Just the image" title="Just the image">

You may also position the image differently within the .img-single container using the object-position property if you want.

Hope it helped.

PS: I also used the overflow property in such cases to avoid images from bleeding out. Cheers!

Answer 2

If you remove Foundation's thumbnail class this should work.

HTML (e.g)

<div class="img-grid row small-up-2 medium-up-3 large-up-4">
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/620/580/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/440/780/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/460/640/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/720/420/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/660/400/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/480/840/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/400/640/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/440/780/animals" class="" alt="">
       </a>
    </div>
</div>

SCSS

.img-single {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      min-width: 300px;
      min-height: 300px;
    }
}

JSFiddle demo

Answer 3

You can center the image in a smaller container using background-image on a div.

<div class="thumbnail" style="background: url("assets/img-01.jpg") no-repeat;"></div>

.thumbnail {
  background-position: center;
  width: 50px;
  height: 50px;
}