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.