10/28/2017

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

How To Use The Object-Fit Property With CSS To Center And Crop An Image For Mobile Responsiveness - Jefferson Memorial

Overview:

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:

Jefferson Memorial Washington DC

Jefferson Memorial Washington DC Cropped

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.
Previous Post
Next Post

I'm a creative individual that makes a living from the dynamics of digital technology.

Related Posts

0 comments: