Aspect ratio
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 specified 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.
Component
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. number | Default value Required |
Prop width# | Description and type Aspect ratio width. For example 16 would be widescreen video. 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. 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. Width<string | number> | Default value |