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.
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
What values can be used? #
There are 5 values that can be used for this property;
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, 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.
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 chooses the smallest object size between the results of
contain being used.
none, the width and height of the content box is ignored by the object, which will maintain it’s original size.
These values can also be used alongside the [[CSS Object Position]] property.
Support is very good, with - typically - IE 11 being the outcast.
So, what are you waiting for? Go try it out!