CSS Object-fit
The CSS <object-fit> property allows us to control how an image or video fits into its container. This is especially important when the element’s size differs from its original aspect ratio.
Basics of object-fit
The <object-fit> property sets how an image should fit into a box of defined width and height. The most common values are cover and contain.
Simple examples
The following examples show how the same image behaves with different object-fit values.
Cover vs. Contain comparison
Cover fills the container by cropping the image, while contain keeps the entire image but may leave empty space in the container.
Tips for using object-fit
Object-fit is particularly useful for responsive design, but user experience should be considered.
- Use cover when visual filling is the most important.
- Use contain when preserving the entire image is the goal.
- Test different settings on mobile and desktop to achieve the best result.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
