Crop and Position Images with Tailwind object-fit Utilities

Adam Wathan
InstructorAdam Wathan

Share this video with your friends

Send Tweet

The intrinsic aspect ratio has been controlling the look of the image in our card. If we wanted to adjust the styling of the image it could scale and distort in ways that wouldn't look good.

We need to tell the browser how to render the object regardless of the size. In Tailwind, we use the object-fit utilities which will let us crop and size an image in a way that works for our use-case.

Note: IE11 doesn't support this feature so we'll see how we can get around this with setting the image as a backgroundImage style. This accessible so should be avoided whenever possible.