CSS Object Fit

The object-fit property specifies how the content of an image or video should be resized to fit its container. It is especially useful for responsive web design and image galleries.

Why Use object-fit?

• Maintains image proportions.
• Creates responsive image layouts.
• Prevents image distortion.
• Works with fixed-size containers.
• Improves gallery and card layouts.

img{

    width:300px;
    height:200px;

    object-fit:cover;

}

The object-fit property determines how the content should fill its container while preserving or ignoring its aspect ratio.

img{

    object-fit:cover;

}

The fill value stretches the image to completely fill the container. This is the default value and may distort the image's aspect ratio.

img{

    width:300px;
    height:200px;

    object-fit:fill;

}

The contain value resizes the image so the entire image fits inside the container while maintaining its aspect ratio.

img{

    width:300px;
    height:200px;

    object-fit:contain;

}

The cover value scales the image to completely cover the container while preserving its aspect ratio. Some portions of the image may be cropped.

img{

    width:300px;
    height:200px;

    object-fit:cover;

}

.gallery img{

    object-fit:cover;

}

The none value displays the image in its original size without resizing it to fit the container. If the image is larger than the container, some parts may overflow.

img{

    width:300px;
    height:200px;

    object-fit:none;

}

The scale-down value compares the results of none and contain and uses whichever produces the smaller image.

img{

    width:300px;
    height:200px;

    object-fit:scale-down;

}

Example 1 : Profile Picture

.profile{

    width:150px;
    height:150px;

    object-fit:cover;

}

Example 2 : Product Image

.product{

    width:250px;
    height:200px;

    object-fit:contain;

}

Example 3 : Banner Image

.banner{

    width:100%;
    height:300px;

    object-fit:cover;

}

Example 4 : Thumbnail

.thumbnail{

    width:120px;
    height:120px;

    object-fit:fill;

}

• Maintains image quality.
• Creates responsive image layouts.
• Reduces image distortion.
• Perfect for image galleries.
• Works well with videos.
• Easy to use and maintain.
• Improves user experience.

.gallery img{

    width:250px;
    height:180px;

    object-fit:cover;

}

Following best practices helps create responsive and visually appealing image and video layouts.

• Use cover for profile pictures and image galleries.
• Use contain when the entire image must remain visible.
• Avoid using fill if image distortion is unacceptable.
• Specify both width and height for predictable results.
• Combine object-fit with object-position for better alignment.
• Test images on different screen sizes.
• Optimize image size for faster page loading.
• Use responsive layouts whenever possible.

❌ Poor

img{

    object-fit:fill;

}

✔ Better

img{

    object-fit:cover;

}

The object-fit property is supported by all major modern web browsers.

1. What is the purpose of the object-fit property?
2. What is the difference between cover and contain?
3. Which value may distort an image?
4. What does the none value do?
5. How does scale-down work?
6. Can object-fit be used with videos?
7. What is the default value of object-fit?
8. How is object-fit different from background-size?
9. Which value is best for profile pictures?
10. Is object-fit supported in modern browsers?

In this lesson, you learned:

• ✔ Introduction to CSS Object Fit.
• ✔ The object-fit property.
• ✔ fill value.
• ✔ contain value.
• ✔ cover value.
• ✔ none value.
• ✔ scale-down value.
• ✔ Practical examples.
• ✔ Best Practices and Common Mistakes.
• ✔ Browser Support and Interview Questions.