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. 

 Summary

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!

 

2 Comments

Leave a Reply

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

Android
2
Animated Splash Screen to you Android App using Android Studio

Today I am switching you to one finest technology of this world and that is Android. In this tutorial I am showing you how you can create a animated Splash screen which is the first part of any android application creation.

develope
Yii2.0 Dynamic Model Creation

As per my previous shared post you have to know what is Yii 2.0 and its awesome features. If you not read these posts please read this and know little bit about Yii2.0 basic(API Web APP) . Today I am sharing you a very new feature of Yii 2.0 which will …

develope
MySQL Query tricks

MySQL one the very famous Database. Today i going to share with you very simple tricks of MySQL. MySQL DB always come with WAMP, LAMP, XAMP and MySQL is easy because there are many supporters and old and newbie start there first work with db and that db is MySQL.