Center and crop images with CSS: image-after

Center and crop image with pure CSS

It’s simple. Set your image crop dimensions and use this line in your CSS:

img { object-fit: cover; }

That’s it. No need for unsemantic, wrapping divs or any other nonsense.

This technique works great for cropping awkwardly-sized pictures down to squares or circles. Take this wide photo below for example. Once object-fit: cover is applied to the image and a width and height are set, the photo crops and centers itself.

img{
height: 400px;
display: block;
width: 100%;
object-fit: cover;
}

Before:

Center and crop images with CSS: image-before

After object-fit:

Center and crop images with CSS: image-after

object-fit: cover crops the exact same way background-size: cover does, but is used for styling imgs, videos and other media tags rather than background images.

Source: https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top