Adding a focus point to images

For some designs to work, images have to be a certain aspect ratio. But the images we get don’t always have that aspect ratio. Let’s set up an example to refer to:

<div class="images-container">
  <img
    src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  />
  <img
    src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  />
</div>

Here we have some HTML with two similar images. We keep the first one as is, using it as a reference. Below is the CSS to place the two images besides each other with a small gap.

.images-container {
  display: flex;
  gap: 2rem;
}

We are now ready to begin.

First, we set the size of the second image to something specific. This would be something dictated by our design. We add the following CSS class to the second image: img-fixed-size and add some styles to it:

.img-fixed-size {
  width: 200px;
  height: 150px;
}

Setting the image width and height can result in the image being stretched, which looks horrible in almost all cases.

To fix this, we’ll make sure the image keeps its original aspect ratio. We do this by setting object-fit: cover; on our image. We do this by adding the following to the CSS file:

.img-cover {
  object-fit: cover;
}

And adding that class to the second image.

Sometimes this results in an important part of the image sticking outside of the frame and therefore being hidden. In the example below, the image is centered (the default behaviour), but the tail sticks out of the image.

We can write some CSS which changes the image’s position in relation to its frame and can therefore make sure that the important parts of the image stay inside the frame rather than outside.

This is done using the object-position CSS property.

If we for instance add this CSS class to our stylesheet:

.img-position {
  object-position: 50% 0%;
}

And add it to the second image in our HTML as well we get something like this:

In the above example, the focus of the image has moved. We now focus on the top rather than the center. The default value of object-position is 50% 50% which means we focus on the center of the image. In our example, we changed the vertical focus to be on the top of the image.

Here, we have set this using a CSS class, but in a project, where content comes from a CMS, we don’t know which image is placed on the page. We can therefore move the object-position property out of the stylesheet and set it as inline styles. This way we could allow editors to set the position themselves from the CMS as well and apply those values.

The finished HTML and CSS would look something like this:

<div class="images-container">
  <img
    src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  />
  <img
    class="img-fixed-size img-cover"
    style="object-position: 50% 0%"
    src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  />
</div>

.images-container {
  display: flex;
  gap: 2rem;
}

.img-fixed-size {
  width: 200px;
  height: 150px;
}

.img-cover {
  object-fit: cover;
}

Recap

• Set the size or aspect ratio of the image element.
• Set the object-fit CSS property to cover.
• Set the object-position CSS property to position your image inside its frame.
  • Use percentages like 25% 50% or named positions (see documentation, for instance on https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)