Ratios#

Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.

About#

Use the ratio helper to manage the aspect ratios of external content like <iframe>s, <embed>s, <video>s, and <object>s. These helpers also can be used on any standard HTML child element (e.g., a <div> or <img>). Styles are applied from the parent .ratio class directly to the child.

You don't need to include frameborder="0" in your iframes.

Example#

<div style={{ width: 660, height: 'auto' }}>
  <Ratio aspectRatio="16x9">
    <embed type="image/svg+xml" src="/TheresaKnott_castle.svg" />
  </Ratio>
</div>

Aspect ratios#

Aspect ratios can be customized using aspectRatio. By default the following aspectRatio values are provided:

['1x1', '4x3', '16x9', '21x9'].map((ratio) => (
  <Ratio aspectRatio={ratio}>
    <div>{ratio}</div>
  </Ratio>
));

Custom#

Create custom aspect ratios by passing a number to aspectRatio instead of using the above pre-defined values. You can use either a fraction or percentage to define the custom ratio.

<>
  <Ratio aspectRatio={1 / 2}>
    <div>2x1</div>
  </Ratio>
  <Ratio aspectRatio={50}>
    <div>2x1</div>
  </Ratio>
</>

API#

Ratio#view source file