1×
Become a member
to unlock all features

Create egghead account to access 5000+ tutorials and resources from expert developers.

Create account
Autoplay

    Crop and Position Images with Tailwind object-fit Utilities

    tailwindTailwind

    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.