How To Use The Object-Fit Property With CSS To Center And Crop An Image

Have you ever wanted to use simple code to crop an image and focus on a specific section of that image without having it stretch or compress? Today I'm going to show you how to achieve that with a quick tutorial using the Object-Fit Property with CSS!

The Demo:

Above I have two images of the Jefferson Memorial in Washington D.C. The first image is the original at it's full width. The second image is the same image cropped to focus on the middle section of the photograph. You can easily do this using the following code:

HTML:

<center><img class="imgCrop1" title="IMAGE TITLE" src="HOSTED IMAGE URL HERE" alt="IMAGE ALT ATTRIBUTE HERE"></center>

CSS:

<style>

.imgCrop1 { /*image class name*/
width:390px; /*Set the width to your choosing, match the height to create a square*/
height:390px; /*Set to the actual height of the origianl image*/
object-fit:cover;
}

</style>

Let me know your thoughts on this tutorial in the comments section below! If you'd like further information on this topic visit w3schools.com.

If you'd like to check out a related tutorial of mine read: How To Crop An Image Using The CSS Clip Property.