Cropping Images with CSS While Keeping a Focal Point in the Center

Images can be an impactful part of web content,<br>but providing images that fit every device, from small to large screens,<br>can be quite a challenge.

Fortunately, the web platform offers several solutions for adjusting images to different screen sizes,<br>including resolution switching and art-direction.

However, there are times when cropping an image on the client side is necessary,<br>especially when the image needs to fit into a dynamically sized container.

To crop an image effectively,<br>it’s important to prioritize a specific part of the image and preserve the essential content around it.<br>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.

I’ve tried to describe all steps thoroughly, but if you prefer you can skip directly to the TL;DR.

Image source placed into different sized containers in a grid.<br>The image is automatically cropped while centering the focal point if possible.<br>(The focal point is the yellow sunny part above the waterfall, as you might have guessed.)

Illustration: Created with the assistance of DALL·E 2

Use client-side cropping sparingly

While client-side cropping can be an effective way to adapt images further for display on different screens and devices,<br>it can also be a wasteful technique.<br>The downside of cropping on the client is that we discard pixels that we’ve spent resources on transferring and decoding.<br>As a result we end up with larger file sizes, slower load times, and a less optimal user experience overall.<br>As such, it’s important to use client-side cropping sparingly and consider alternative responsive image techniques.

The web platform offers a range of built-in solutions to optimize images for different screen sizes and devices,<br>such as srcset and sizes attributes and the element. If you’re not familiar with these solutions MDN has a great article on providing responsive images.

Fitting the image into specific dimensions

Let’s start by trying to fit an image into a 3 / 1 aspect ratio.<br>We can do this by declaring the aspect-ratio property on the image.

The image will adjust by stretching to fit its dimensions.<br>This is not exactly what we want, but it is a step in the right direction.

width: 100%;<br>aspect-ratio: 3 / 1;

Maintaining the aspect-ratio of the image

To tell the browser how to resize the image to fit its container, we can use the object-fit property.

This property allows us to choose how the image should be scaled, using values like contain, cover, fill, none, or scale-down.<br>When we use the cover value, the image is scaled to fill the container while preserving its natural aspect ratio.

width: 100%;<br>aspect-ratio: 3 / 1;<br>object-fit: cover;

This is a step in the right direction, but there’s still an issue:<br>the image is cropped towards the center, and not necessarily towards where our subject is placed.

Adjusting the position of the image

To address the issue of the image being cropped towards the center,<br>we can use the object-position property in CSS to reposition the image within its container.<br>Initially, we’ll hand-tune the value of this property to achieve a better crop.

To ensure that the repositioning works across different screen sizes,<br>we’ll use relative units like values instead of absolute units like pixels.<br>A value of 0% aligns the start edge of the image with the start edge of the container,<br>while a value of 100% aligns the end edge of the image with the end edge of the container.

When using a two value syntax with percentage values,<br>the horizontal position is declared first followed by the vertical position.

Let’s say, for example, that we want to reposition an image so that its subject is in the bottom left corner of the container.<br>We could use a value of 0% 100% for the object-position property to achieve this.

For our example a value of 50% 62% seems to give suitable results:

width: 100%;<br>aspect-ratio: 3 / 1;<br>object-fit: cover;<br>object-position: 50% 62%;

Although hand-tuning the object-position property allows us to create a nice crop for the current dimensions,<br>it’s not feasible to manually adjust the position for every image and every dimension.<br>Instead, we need a more automated way to crop the image while preserving a focal point.

Setting a focal point

To define a custom focal point for cropping, we can declare custom properties like --crop-focus-x and --crop-focus-y,<br>and set these to values between 0 and 1.<br>Using values makes it possible to perform mathematical operations with values using calc() .

For example, as the subject of our image is placed at around 60% horizontally and 60% vertically, we can set the custom properties accordingly:

--crop-focus-x: 0.6

--crop-focus-y: 0.6

While it’s possible to use the custom focus point directly in...