How to Handle Uploaded Images and Avoid Image Distortion

When you are working with images in your application, you might run into issues where the image's aspect ratio is different from the container's specified width and height. This could lead to images looking stretched and distorted.

In this article, we will take a look at how to solve this problem by using the object-fit CSS property.

A Look Into the Issue Using the "Let's Chat With" App

Let's Chat With is an open source application that facilitates networking between attendees for virtual and in-person conferences. When users sign up for the app, they can join a conference and create a new profile with their name, image, and bio.

When the team at This Dot Labs was testing the application, they noticed that some of the profile images were coming out distorted.

The original uploaded source image did not have an aspect ratio of 1:1. A 1:1 aspect ratio refers to an image's width and height being the same.

Since the image was not a square, it was not fitting well within the dimensions below.

:host {
  --avatar-min-width: 64px;
  --avatar-min-height: 64px;
}

.avatar-img {
  display: block;
  min-width: var(--avatar-min-width);
  min-height: var(--avatar-min-height);
  max-width: var(--avatar-min-width);
  max-height: var(--avatar-min-height);
  width: var(--avatar-min-height);
  height: var(--avatar-min-height);
  background-color: var(--white);
  border: 2px solid var(--white);
}

.rounded {
  border-radius: 50%;
}

.bordered {
  box-shadow: 0 0 0 1px var(--grey-400);
}

In order to fix this problem, the team decided to use the object-fit CSS property.

What is the object-fit CSS property?

The object-fit property is used to determine how an image or video should resize in order to fit inside its container. There are 5 main values you can use with the object-fit property.

• object-fit: contain; - resizes the content to fit inside the container without cropping it
• object-fit: cover; - ensures the all of the content covers the container and will crop if necessary
• object-fit: fill; - fills the container with the content by stretching it and ignoring the aspect ratio. This could lead to image distortion.
• object-fit: none; - does not resize the content which could lead to the content spilling out of the container
• object-fit: scale-down; - scales larger content down to fit inside the container

When the object-fit: cover; property was applied to the profile image in Let's Chat With, the image was no longer distorted.

.avatar-img {
  display: block;
  object-fit: cover;
  min-width: var(--avatar-min-width);
  min-height: var(--avatar-min-height);
  max-width: var(--avatar-min-width);
  max-height: var(--avatar-min-height);
  width: var(--avatar-min-height);
  height: var(--avatar-min-height);
  background-color: var(--white);
  border: 2px solid var(--white);
}

When Should You Consider Using the object-fit Property?

There will be times where you will not be able to upload different sized images to fit different containers. You might be in a situation like Let's Chat With, where the user is uploading images to your application.

In that case, you will need to apply a solution to ensure that the content appropriately resizes within the container without becoming distorted.

Conclusion

In this article, we learned about how to fix distorted uploaded images using the object-fit property. We examined the bug inside the Let's Chat With application and how that bug was solved using object-fit: cover;. We also talked about when you should consider using the object-fit property.

If you want to check out the Let's Chat with app, you can signup here.

If you are interested in contributing to the app, you can check out the GitHub repository.