Skip to content

object-fit CSS3

Images and video are the most important stuffs for any website, But one of the big problem with this is to maintain the aspect ratio of it. When we create a box like 100×100 and image ratio is small then it is very difficult to maintain image pixels,while we want to good pixels quality picture we will need to calculate the images ratio properly. So in that object-fit is one of the most good and advance property of CSS3. Let See how we can use this…

How do object-fit work?

You can successfully apply object-fit to any replaced element, for example:

img { object-fit: contain; } 

In the code samples and examples for this article, we set the width and height of our replaced elements in CSS. object-fit also takes effect when the dimensions have been specified directly in HTML – however, in browsers that don’t support this CSS property, this would result in those replaced elements always looking squashed or stretched, so instead we omit the dimensions and let those browsers simply display them using their intrinsic sizes. Which approach works best will depend on your specific situation and what sort of graceful degradation you want to achieve.

The four possible values of object-fit are as follows:

  • contain: if you have set an explicit height and width on a replaced element, object-fit:contain will cause the content (e.g. the image) to be resized so that it is fully displayed with intrinsic aspect ratio preserved, but still fits inside the dimensions set for the element.
  • fill: causes the element’s content to expand to completely fill the dimensions set for it, even if this does break its intrinsic aspect ratio.
  • cover: preserves the intrinsic aspect ratio of the element content, but alters the width and height so that the content completely covers the element. The smaller of the two is made to fit the element exactly, and the larger overflows the element.
  • none: the content completely ignorse any height or weight set on the element, and just uses the replaced element’s intrinsic dimensions.

Although the value none was in the original specification and is supported in Opera, it has been removed in a later revision of the spec – but may well return in a future iteration.

object-position works in exactly the same way as background-position does for background images, and can take the same values. For example:

img {
	-o-object-fit: cover;
	overflow: hidden;

See the -o-object-fit:cover example. 


This article showcased a few ideas for how to use object-fit . We are created some exmaples, and as always let us know what you think of our implementation!


Previous article

How to Solve Rubik's Cube in 1,1/2 mins - Beginners

Next article

5 Thing Will Speed Your WordPress Website

Join the discussion

Leave a Reply

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

%d bloggers like this: