Aspect ratio

warning

In some cases, aspect ratio sizing may not be supported by the embed. This component will only work with ones that do, like YouTube.

EuiAspectRatio provides a way to responsively resize a single block level child element to a specificied ratio. This is useful for things like YouTube iframes or other embeds that initially have a fixed size. If you need something similar for images, take a look at CSS's object-fit property.

Loading...

Props

EuiAspectRatio

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop height# ↦	Description and type Aspect ratio height. For example 9 would be widescreen video. Type: number ↦	Default value Required ↵
Prop width# ↦	Description and type Aspect ratio width. For example 16 would be widescreen video. Type: number ↦	Default value Required ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop maxWidth# ↦	Description and type The maximum width you want the child to stretch to. Type: Width<string | number> ↦	Default value ↵

𐘂𐘂