Aspect ratio

A box that keeps its proportions. Media covers.

16 : 9

Frame

The field is the picture.

Install

npx @noordvc/raster-cli add aspect-ratio

Markup

<div class="rs-ratio" style="aspect-ratio:16/9;max-width:280px;background:var(--divider-subtle)"></div>

React

import { AspectRatio } from "@/components/raster/aspect-ratio";

<AspectRatio ratio={16 / 9}>
  <img src="/cover.jpg" alt="" />
</AspectRatio>

Classes

.rs-ratio