Back to Top

How to use CSS3 Object-fit


Recently I came across the very interesting property of css3 and its uses for sizing elements.This morning I spent some time investigating object-fit in CSS3 and here I am going to share my experience with you.

The object-fit CSS property defines how an element should fit the width and height of its content box.It is mainly useful for images, videos, objects, SVG content element in HTML.

If the page has to be something like a grid of images and pictures of different sizes, the property object-fit provides a simple and elegant solution.Without object-fit dimensions are set like only one dimension (width or height) at a time that the second calculates so you can at least maintain the aspect ratio.

object-fit Options

object-fit include following options

1. contain – To shrink or enlarge itself until it fits in the box while fit according to aspect ratio.

2. fill – stretches object to fill the entire box and ignore its own aspect-ratio.(default). It fills the area proportionally

3. cover – To shrink or enlarge itself but maintains aspect ratio.

4. none – It ignore the height and width of the parent and maintain correct aspect ratio.

5.scale-down – To compare the results of none and contain and choose the one that results in the smallest image.

Formal syntax:

Here is the syntax of object-fit CSS property

object-fit:  fill | contain | cover | none | scale-down

Read about: CSS3 Gradient Effect

Initial value: fill
Applies to: Replaced elements
Inherited: No
Animatable: No
CSS Version: CSS3


.class {
   object-fit: cover;

Browser Support

browser support object-fit

We hope this article helps people to understand the usage of object-fit.It’s pretty cool stuff, and I’m sure there’re tons more you to know about the css3 property. If you know any other property of CSS3, please share in the comments 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

Blank Screen of WordPress Admin Panel

Posted on 7 years ago


How to add Search By Category In WordPress

Posted on 2 years ago


How To Send Email in MODx

Posted on 7 years ago


Getting Started with LESS CSS

Posted on 4 years ago


Hello world

Updated 5 days ago

Nick Carter

In depth Understanding of Laravel Core

Updated 2 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – August 2014

Posted on 4 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago