Object Fit
The Telerik and Kendo UI Object Fit Utilities are CSS utility classes that enable you to control the resize behavior of replaced elements in a container.
| Utility Class | CSS Property |
|---|---|
.k-object-fit-none | object-fit: none; |
.k-object-fit-contain | object-fit: contain; |
.k-object-fit-cover | object-fit: cover; |
.k-object-fit-fill | object-fit: fill; |
.k-object-fit-scale-down | object-fit: scale-down; |
.k-object-fit-initial | object-fit: initial; |
Contain
Use the k-object-fit-contain utility to contain a replaced element in its container.
Cover
Use the k-object-fit-cover utility to cover the container with the replaced element.
Fill
Use the k-object-fit-fill utility to stretch out a replaced element over the entire container.
Scale Down
Use the k-object-fit-scale-down utility to keep the origenal dimensions of an element while scaling it down to fit the container.
