Crop and Position Images with Tailwind object-fit Utilities
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.
Adam Wathan: [0:00] Up until now, we've been allowing these images' intrinsic aspect ratio to control how tall and how wide it is in the browser. Let's say we want to give this image a very specific height and a specific width, how can we pull that off without introducing any scaling artifacts? Let's explore it.
[0:15] I'm going to add some classes to this image to force it to be a different size. Why don't we give it a height of say like 64, just a value from Tailwind spacing scale, and a width of full just to force it to a specific size? Now, you can see the image is a lot taller and it's stretched out.
[0:31] We could exaggerate this effect by maybe making it really short like h-16. Now, you can see it's really distorted as it's stretched really wide.
[0:39] Let's set this back to something a little bit more reasonable, so we can start to see the effect of what we're about to do.
[0:43] At h-32, this is still pretty distorted, but we can see pretty clearly what's going on at least. If we want to tell the browser how exactly to render this image, given this fixed shape that it needs to render it in, we can do so using the object-fit CSS property.
[0:59] Tailwind exposes that property through a bunch of object-fit utilities. For example, we could do object-contain, and this will tell the browser to make sure that it can show the full image without any scaling constraining it to whatever this overall shape is that we're trying to fit it in.
[1:14] Similarly, we can use object-cover which says cover the entire area, but still don't distort the image. Object-cover is the one I find myself needing most often, and is the one that we'd want to use in this case.
[1:26] Now by default, object-cover is going to center the contents of the image in the area that we're trying to display it. We can also customize that if we'd like to using the object-position utilities.
[1:36] Right now, the default is object-center. This is going to look exactly like it did before. If you want to anchor this to the top, we could say object-top. Now, it's always going to show the top of the image and cut off the bottom. Similarly, we can do object-bottom, which will always show the bottom and cut off the top.
[1:52] We can also do stuff like object-left or object-right, but because of how this image is being cropped in this particular case, we're not going to see those have any effect.
[2:00] Let's delete this utility since we don't actually need it, and set the height back to something reasonable, maybe something like h-48. Now, I think this is a pretty good shape for this image.
[2:09] Now, one thing to keep in mind is that IE11 does not support object-fit or object-position. If you need to support anything other than evergreen browsers, you might need to use a different solution.
[2:20] The best solution that works with IE11, in my experience, is to use a background image, instead of a regular image.
[2:25] What we could do is we could add a div here. We could give this div the same classes that we have on the image in terms of the actual dimensions, so we can say h-48. It's going to be width full by default, so we don't need to set that. Then, we need to assign the background image as an inline style.
[2:39] I'm just going to say, using Vue inline style syntax, that for style, we want the background image to be a URL pointing at property.imageUrl. With any luck, if we've done this correctly, we should see two images, yeah, and we do.
[2:59] Now we can control the positioning of this background image using similar utilities as we did for the regular image. But this time, instead of object-cover, we're going to use bg-cover to tell Tailwind to give the background image a size of cover.
[3:11] We're also going to want to center this since the default background position is not center. Now, if we didn't have this image, you see, we have the exact same result, but now we're able to support IE11.
[3:21] If you don't need to support IE11, I definitely recommend using an image tag with object-fit and object-position, because it is a little bit more accessible.
[3:29] Screen readers will be able to see that there's actually an image here, whereas they're not going to know about some background image that you're setting on a div. So whenever possible, use an image tag, but if you can't, this background image approach will also work in a pinch.