Aspect Ratio
A native web component that reserves space with a fixed ratio (for example 16/9 or 1/1) for nested content, preventing layout shifts while the media loads. Images, videos, iframes and other media fill 100% of the width and height with object-fit cover, cropped to the bounds of the box. Use it for thumbnails, video players, embedded maps and any responsive media that needs to preserve its proportions.
Preview
<div style="display:flex;gap:1rem;flex-wrap:wrap;max-width:680px">
<pura-aspect-ratio ratio="16/9" rounded style="flex:1;min-width:280px">
<img src="https://picsum.photos/seed/pura-paisagem/800/450" alt="Landscape at dusk" />
</pura-aspect-ratio>
<pura-aspect-ratio ratio="1/1" rounded style="width:160px">
<img src="https://picsum.photos/seed/pura-perfil/400/400" alt="Profile photo" />
</pura-aspect-ratio>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
ratio | string | 1/1 | Desired ratio. Accepts "16/9", "16:9", "1.78" or a single number; an invalid value falls back to 1/1. |
rounded | boolean | false | When present, applies the theme's border radius (var(--pura-radius)) and rounds the corners. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/aspect-ratio.js"></script>import "./pura/lib/aspect-ratio.js";