To crop an image effectively, it’s important to prioritize a specific part of the image and preserve the essential content around it. One way to achieve this is by identifying the image’s ‘focal point’ - the part of the image that is most important - and cropping the image around it.

In this post, I’ll walk you through my technique for cropping images with CSS while preserving the image’s focal point.