---
title: Object Fit
position: 7
seo_title: Telerik and Kendo UI Object Fit Utilities
seo_description: The Telerik and Kendo UI Object Fit utilities enable you to
  configure how a replaced element is resized within its container.
---
## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element) in a container.

<CSSRulesList data='{"id":"object-fit"}'></CSSRulesList>

### Contain

Use the `k-object-fit-contain` utility to contain a replaced element in its container.

<LiveDemo data='{"links":[],"demo":"utils/layout/object-fit/contain","codePreviewSettings":{"filterSelector":".k-object-fit-contain","ignoreClassNames":"k-w-full k-h-full"},"height":""}'></LiveDemo>

### Cover

Use the `k-object-fit-cover` utility to cover the container with the replaced element.

<LiveDemo data='{"links":[],"demo":"utils/layout/object-fit/cover","codePreviewSettings":{"filterSelector":".k-object-fit-cover","ignoreClassNames":"k-w-full k-h-full"}}'></LiveDemo>

### Fill

Use the `k-object-fit-fill` utility to stretch out a replaced element over the entire container.

<LiveDemo data='{"links":[],"demo":"utils/layout/object-fit/fill","codePreviewSettings":{"filterSelector":".k-object-fit-fill","ignoreClassNames":"k-w-full k-h-full"}}'></LiveDemo>

### Scale Down

Use the `k-object-fit-scale-down` utility to keep the original dimensions of an element while scaling it down to fit the container.

<LiveDemo data='{"links":[],"demo":"utils/layout/object-fit/scale-down","codePreviewSettings":{"filterSelector":".k-object-fit-scale-down","ignoreClassNames":"k-w-full k-h-full"}}'></LiveDemo>