HTML & CSS Interview Question #118

What does object-fit do for images and videos?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

object-fit controls how replaced content such as an image or video is resized within its content box when the box and media aspect ratios differ. Common values include cover, contain, fill, none, and scale-down.

Detailed Explanation

object-fit controls how replaced content such as an image or video is resized within its content box when the box and media aspect ratios differ. Common values include cover, contain, fill, none, and scale-down.

cover fills the box while potentially cropping part of the media. contain preserves the entire media but may leave unused space. The correct choice depends on whether cropping is acceptable.

Code Example

.product-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.logo {
    width: 180px;
    height: 80px;
    object-fit: contain;
}