Let’s get into it #
By using the object-fit property, we can define how an element responds to its parent containers height and width. This property is mainly used alongside images and videos, and can let us have further control over how it allows an inline image to be displayed.
See the Pen Object-Fit Example #1 by Dom Jay (@dominickjay217)on CodePen.
Looking at the example above, the inline image can be adjusted to the size of it’s parent container. There are a number of values that can be used to set object-fit.
What values can be used? #
There are 5 values that can be used for this property; fill, contain, cover, scale-downand none.
Fill #
Similar to background-size, the content is sized to completely fill the content box of the element, regardless of the height and width. If the aspect ratio of the content does not match the aspect ratio of the element, then it will stretch to fit.
Contain #
When using contain, the content scales to keep its aspect ration while also fitting within the boundaries of the elements content box. Using this can make the object display gaps vertically or horizontally.
The entire object is made to fill the box, while preserving its aspect ratio, so the object will be “letterboxed” if its aspect ratio does not match the aspect ratio of the box.
Cover #
This one is similar to contain, however, it will not “letterbox” the object to keep it’s aspect ratio. Instead it will continue to expand the content to fit the content box, often cropping the content as a result.
Scale-Down #
scale-down chooses the smallest object size between the results of none and contain being used.
None #
For none, the width and height of the content box is ignored by the object, which will maintain it’s original size.
See the Pen Object-Fit Example #1 by Dom Jay (@dominickjay217) on CodePen.
These values can also be used alongside the [[CSS Object Position]] property.
Support? #
Support is very good, with - typically - IE 11 being the outcast.
Source: CanIUse
So, what are you waiting for? Go try it out!
