---
title: AspectRatio
description: 'AspectRatio renders content with a given width:height ratio. A common example would be the HD 16:9 ratio.'
type: images
slug: /components/aspectratio/
keywords:
    ['aspectratio', 'image', 'ratio', 'aspect', 'width', 'height', 'resize']
---

# AspectRatio

`AspectRatio` renders content with a given width:height ratio. A common example would be the **HD** `16:9` ratio.

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [Use Cases](#use-cases)
    -   [iFrames](#iframes)
-   [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/layout/aspectratio.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

```jsx live
import { AspectRatio } from '@wp-g2/components';

function Example() {
	return (
		<AspectRatio ratio={16 / 9}>
			<img
				src="https://picsum.photos/seed/picsum/800/800"
				alt="Snowy Mountains"
				style={{ objectFit: 'cover' }}
			/>
		</AspectRatio>
	);
}
```

## Props

##### ratio

**Type**: `number`

The width:height ratio to render.

```
<AspectRatio ratio={16/9} />
```

##### width

**Type**: `CSS['width']`

A custom width.

<!-- /Automatically Generated -->
<!-- /props -->

## Use Cases

Typically, media-based content (such as images or video) would benefit from an `AspectRatio` controlled container.

### iFrames

A common use-case for `AspectRatio` would be to render `iframe` content with a specific responsive width:height ratio.

In the example below, we're rendering a [YouTube video iFrame embed](https://www.youtube.com/watch?v=Zi4LMpSDccc) with a custom ultra-wide `21:9` aspect ratio.

```jsx live
import { AspectRatio } from '@wp-g2/components';

function Example() {
	return (
		<AspectRatio ratio={21 / 9}>
			<iframe
				width="560"
				height="315"
				src="https://www.youtube.com/embed/Zi4LMpSDccc"
				frameborder="0"
				allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
				allowfullscreen
			/>
		</AspectRatio>
	);
}
```

## See Also

-   [Image](../image/)