Card title
Card description.
Layout
Aspect Ratio
A frame that keeps images, video and embeds at a fixed width-to-height ratio.
| Class name | Type | Description |
|---|---|---|
aspect-ratioplf:aspect-ratio | Component | A full-width frame, 16:9 by default |
aspect-ratio-contentplf:aspect-ratio-content | Part | The image, video or iframe that fills the frame |
Default
Give an informative image a meaningful alt.
<div class="aspect-ratio">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div><div class="plf:aspect-ratio">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>import { AspectRatio } from '@pelatform/react';
export function Example() {
return (
<AspectRatio>
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
);
}import { AspectRatio } from '@pelatform/react/prefixed';
export function Example() {
return (
<AspectRatio>
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
);
}<div class="grid grid-cols-3 gap-4">
<div class="aspect-ratio" style="--plf-aspect-ratio: 1 / 1">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<div class="aspect-ratio" style="--plf-aspect-ratio: 4 / 3">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<div class="aspect-ratio" style="--plf-aspect-ratio: 9 / 16">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
</div><div class="plf:grid plf:grid-cols-3 plf:gap-4">
<div class="plf:aspect-ratio" style="--plf-aspect-ratio: 1 / 1">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<div class="plf:aspect-ratio" style="--plf-aspect-ratio: 4 / 3">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<div class="plf:aspect-ratio" style="--plf-aspect-ratio: 9 / 16">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
</div>import { AspectRatio } from '@pelatform/react';
export function Example() {
return (
<div className="grid grid-cols-3 gap-4">
<AspectRatio ratio="1 / 1">
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<AspectRatio ratio="4 / 3">
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<AspectRatio ratio="9 / 16">
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
</div>
);
}import { AspectRatio } from '@pelatform/react/prefixed';
export function Example() {
return (
<div className="plf:grid plf:grid-cols-3 plf:gap-4">
<AspectRatio ratio="1 / 1">
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<AspectRatio ratio="4 / 3">
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<AspectRatio ratio="9 / 16">
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
</div>
);
}<div class="grid grid-cols-3 gap-4">
<div class="flex flex-col gap-2">
<div class="aspect-ratio" style="--plf-aspect-ratio: 1 / 1">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>cover</span>
</div>
<div class="flex flex-col gap-2">
<div class="aspect-ratio" style="--plf-aspect-ratio: 1 / 1; --plf-aspect-ratio-fit: contain">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>contain</span>
</div>
<div class="flex flex-col gap-2">
<div class="aspect-ratio" style="--plf-aspect-ratio: 1 / 1; --plf-aspect-ratio-fit: fill">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>fill</span>
</div>
<div class="flex flex-col gap-2">
<div class="aspect-ratio" style="--plf-aspect-ratio: 1 / 1; --plf-aspect-ratio-fit: scale-down">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>scale-down</span>
</div>
<div class="flex flex-col gap-2">
<div class="aspect-ratio" style="--plf-aspect-ratio: 1 / 1; --plf-aspect-ratio-fit: none">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>none</span>
</div>
<div class="flex flex-col gap-2">
<div class="aspect-ratio" style="--plf-aspect-ratio: 1 / 1; --plf-aspect-ratio-position: left">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>cover, left</span>
</div>
</div><div class="plf:grid plf:grid-cols-3 plf:gap-4">
<div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:aspect-ratio" style="--plf-aspect-ratio: 1 / 1">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>cover</span>
</div>
<div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:aspect-ratio" style="--plf-aspect-ratio: 1 / 1; --plf-aspect-ratio-fit: contain">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>contain</span>
</div>
<div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:aspect-ratio" style="--plf-aspect-ratio: 1 / 1; --plf-aspect-ratio-fit: fill">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>fill</span>
</div>
<div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:aspect-ratio" style="--plf-aspect-ratio: 1 / 1; --plf-aspect-ratio-fit: scale-down">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>scale-down</span>
</div>
<div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:aspect-ratio" style="--plf-aspect-ratio: 1 / 1; --plf-aspect-ratio-fit: none">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>none</span>
</div>
<div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:aspect-ratio" style="--plf-aspect-ratio: 1 / 1; --plf-aspect-ratio-position: left">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake">
</div>
<span>cover, left</span>
</div>
</div>import type { CSSProperties } from 'react';
import { AspectRatio } from '@pelatform/react';
export function Example() {
return (
<div className="grid grid-cols-3 gap-4">
<div className="flex flex-col gap-2">
<AspectRatio ratio="1 / 1">
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>cover</span>
</div>
<div className="flex flex-col gap-2">
<AspectRatio ratio="1 / 1" style={{ '--plf-aspect-ratio-fit': 'contain' } as CSSProperties}>
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>contain</span>
</div>
<div className="flex flex-col gap-2">
<AspectRatio ratio="1 / 1" style={{ '--plf-aspect-ratio-fit': 'fill' } as CSSProperties}>
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>fill</span>
</div>
<div className="flex flex-col gap-2">
<AspectRatio ratio="1 / 1" style={{ '--plf-aspect-ratio-fit': 'scale-down' } as CSSProperties}>
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>scale-down</span>
</div>
<div className="flex flex-col gap-2">
<AspectRatio ratio="1 / 1" style={{ '--plf-aspect-ratio-fit': 'none' } as CSSProperties}>
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>none</span>
</div>
<div className="flex flex-col gap-2">
<AspectRatio ratio="1 / 1" style={{ '--plf-aspect-ratio-position': 'left' } as CSSProperties}>
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>cover, left</span>
</div>
</div>
);
}import type { CSSProperties } from 'react';
import { AspectRatio } from '@pelatform/react/prefixed';
export function Example() {
return (
<div className="plf:grid plf:grid-cols-3 plf:gap-4">
<div className="plf:flex plf:flex-col plf:gap-2">
<AspectRatio ratio="1 / 1">
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>cover</span>
</div>
<div className="plf:flex plf:flex-col plf:gap-2">
<AspectRatio ratio="1 / 1" style={{ '--plf-aspect-ratio-fit': 'contain' } as CSSProperties}>
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>contain</span>
</div>
<div className="plf:flex plf:flex-col plf:gap-2">
<AspectRatio ratio="1 / 1" style={{ '--plf-aspect-ratio-fit': 'fill' } as CSSProperties}>
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>fill</span>
</div>
<div className="plf:flex plf:flex-col plf:gap-2">
<AspectRatio ratio="1 / 1" style={{ '--plf-aspect-ratio-fit': 'scale-down' } as CSSProperties}>
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>scale-down</span>
</div>
<div className="plf:flex plf:flex-col plf:gap-2">
<AspectRatio ratio="1 / 1" style={{ '--plf-aspect-ratio-fit': 'none' } as CSSProperties}>
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>none</span>
</div>
<div className="plf:flex plf:flex-col plf:gap-2">
<AspectRatio ratio="1 / 1" style={{ '--plf-aspect-ratio-position': 'left' } as CSSProperties}>
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="Illustration of mountains surrounding a blue lake" />
</AspectRatio>
<span>cover, left</span>
</div>
</div>
);
}Video and embeds
An <iframe> takes aspect-ratio-content the same way and needs a title.
HTML
<div class="aspect-ratio">
<video class="aspect-ratio-content" src="video.mp4" controls></video>
</div>Inside a card
Beside a visible title, as in this Card, the image is decorative: give it alt="".
<article class="card">
<div class="card-body flex flex-col gap-4">
<div class="aspect-ratio">
<img class="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="">
</div>
<h3 class="card-title">Card title</h3>
<p class="card-description">Card description.</p>
</div>
</article><article class="plf:card">
<div class="plf:card-body plf:flex plf:flex-col plf:gap-4">
<div class="plf:aspect-ratio">
<img class="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="">
</div>
<h3 class="plf:card-title">Card title</h3>
<p class="plf:card-description">Card description.</p>
</div>
</article>import { AspectRatio, CardBody, CardDescription, CardTitle } from '@pelatform/react';
export function Example() {
return (
<article className="card">
<CardBody className="flex flex-col gap-4">
<AspectRatio>
<img className="aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="" />
</AspectRatio>
<CardTitle>Card title</CardTitle>
<CardDescription>Card description.</CardDescription>
</CardBody>
</article>
);
}import { AspectRatio, CardBody, CardDescription, CardTitle } from '@pelatform/react/prefixed';
export function Example() {
return (
<article className="plf:card">
<CardBody className="plf:flex plf:flex-col plf:gap-4">
<AspectRatio>
<img className="plf:aspect-ratio-content" src="/previews/assets/aspect-ratio-sample.svg" alt="" />
</AspectRatio>
<CardTitle>Card title</CardTitle>
<CardDescription>Card description.</CardDescription>
</CardBody>
</article>
);
}React
AspectRatio from @pelatform/react renders this frame; your image, video or iframe in it takes aspect-ratio-content.
| Prop | Values | Default |
|---|---|---|
ratio |
A CSS ratio such as 4 / 3, or a number; it sets --plf-aspect-ratio |
16 / 9 |
The other props are a div’s own, className and ref included; style takes the other variables, such as --plf-aspect-ratio-fit.
CSS variables
Override on a root or on a single frame; fit and position also work on the content element.
| Variable | Default |
|---|---|
--plf-aspect-ratio |
16 / 9; any CSS ratio |
--plf-aspect-ratio-bg |
Muted surface |
--plf-aspect-ratio-radius |
--plf-radius-lg, 0. (8px) |
--plf-aspect-ratio-fit |
cover; any object-fit value |
--plf-aspect-ratio-position |
center; any object-position value |