The `object-fit` CSS property specifies how an `<img>` or `<video>` should be resized to fit its container. It's a powerful tool for handling images of varying aspect ratios without distortion. This visualizer lets you experiment with all the possible values (`fill`, `contain`, `cover`, etc.) and also adjust the `object-position` to control which part of the image is visible. The preview container is resizable, so you can see how your choices behave in a responsive context.
🖼️object-fit Visualizer
Frequently Asked Questions
What is the difference between `contain` and `cover`?
`contain` scales the image as large as possible to fit inside the container without cropping or stretching it. `cover` scales the image to completely cover the container, cropping parts of the image if necessary to avoid stretching.
What format does `object-position` use?
It uses an X and Y coordinate to set the focus point of the image within its frame. You can use keywords like `center`, `top`, `left`, or percentage values (e.g., `50% 50%` is the center).
