How to display the center of an image in a thumbnail - html

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

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;
}

Answer 3

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