🖼️object-fit Visualizer
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 your own images—simply upload a file or paste a URL. You can toggle between values like `contain` and `cover`, adjust the `object-position`, and even resize the preview container to see exactly how your image behaves in a responsive layout.
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).
