Blogger Ever

object-fit and object-position in CSS

A simple guide to for object-fit and object-position

In my recent development projects with Themelet, I found a common problem of placing images in different sizes of container. Each recent post widget had different image container size and some of the images were repeating. I didn't had to find much on Google because `object-fit` and `object-position` are most common solution to this problem. Let us dig into them with practical examples with codes.


<object-fit>: fill | contain | cover | none | scale-down
`object-fit` basically used for images and videos under the content box of unknown height and width to make sure the correct sizing with proper aspect ratio. It is used with `object-fill` property which is later described in this article in detail. `object-fit` make sure that your object covers the content box in a way you want it. Before we move on each use cases, make sure you are watching the demos as per browser support.

No No 31+ 36+ 19+ 7.1
It is still in consideration for Edge. This is not pretty good to use in production unless any polyfill is used.

fill (default)

`fill` is the default value of object-fit. It stretches or shrunk to fit in the content box of any height and width while the aspect ratio is not preserved.

This value let the user see the whole image instead of just a part of it, in a space provided. I would never recommend using this property to display your portfolio, neither the images with faces in them, doing so will change the faces and figures in the image. The most commonly use case is the home page of blog where single image is shown with each blog post, this is where we have limited space but image that can be resized without any problem.


`contain` resizes the object and fills the content box while preserving the aspect ratio.

This is what perfect for portfolio images and those images with faces in them. However sometimes, to preserve the aspect ratio the space is being left in the content box. Therefore sliders, featured images and galleries must not use this because we want images that covers the whole box instead of leaving the space.

I coded a gallery widget for the last project of Themelet in which I have to keep the all the image container attached to each other while covering all the images, using contain can never give you that.


`cover` fills the content box while preserving the aspect ratio. Now this one is a bit different from the above `contain` property, because it never leaves the spaces in content box however some of the image portion may be cut out of the scene.

I will recommend such property for featured blog images when our motive is to put some visual for a blog post instead of having a concrete reason to put an image there. Like some one blogs about gym and he wanted a guy picture at first, then the motive is to just showcase instead of having some reason behind it. Doing so with some big image areas requires an image with good resolution, well you know the rest.


`none` doesn't resize the image. Well, not much to do with it.


`scale-down` compares between `none` and `contain` to find the smallest size. Thumbnails must be the best place to use them.

Here is what different values react in browser.
See the Pen object-fit by Chris Nager (@chrisnager) on CodePen.


`object-position` is the CSS property works in combination with object-fit. This property changes the position with respect to X/Y co-ordinates and therefore accepts values either in percentage or in pixels.This property can be animated and the best use case can come up by using calc method of CSS.
Before using it, you must know the browser support which is not quite good.
No No 31+ 36+ 19+ 10

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.