---
title: Aspect Ratio
position: 1
seo_title: Telerik and Kendo UI Aspect Ratio Utilities
seo_description: Use the Telerik and Kendo UI Aspect Ratio utilities to
  change the aspect ratio of an element.
---
## Aspect Ratio

The Telerik and Kendo UI Aspect Ratio Utilities are CSS utility classes that enable you to change the aspect ratio of an element.

<CSSRulesList data='{"id":"aspect-ratio"}'></CSSRulesList>

### Automatic

Use the `k-aspect-ratio-auto` utility to apply an automatic aspect ratio to an element.

<LiveDemo data='{"links":[],"demo":"utils/layout/aspect-ratio/auto","height":"300"}'></LiveDemo>

### 1:1

Use the `k-aspect-ratio-1` utility to apply a `1:1` aspect ratio to an element.

<LiveDemo data='{"links":[],"demo":"utils/layout/aspect-ratio/one","height":"300"}'></LiveDemo>

### Video

Use the `k-aspect-ratio-video` utility to apply a video aspect ratio to an element.

<LiveDemo data='{"links":[],"demo":"utils/layout/aspect-ratio/video","height":"300"}'></LiveDemo>

### Square

Use the `k-aspect-ratio-square` utility to apply a square aspect ratio to an element.

<LiveDemo data='{"links":[],"demo":"utils/layout/aspect-ratio/sqaure","height":"300"}'></LiveDemo>