Aspect Ratio

Anatomy

Container that maintains a fixed aspect ratio for its children, useful for videos, images, and responsive layouts.

maud_ui::primitives::aspect_ratio

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`ratio`	`f64`	`No struct Default; supply explicitly`	Aspect ratio as width/height (e.g., 16.0/9.0 ≈ 1.778, 1.0 for square)
`children`	`Markup`	`No struct Default; supply explicitly`	Child markup to be contained within the aspect ratio box

Examples

Common ratios

16:9

4:3

1:1

With image

Usage and composition

Import

use maud_ui::primitives::aspect_ratio::{self, Props};

Example

use maud::html;
use maud_ui::primitives::aspect_ratio;

html! {
    (aspect_ratio::render(aspect_ratio::Props::video(
        html! {
            img src="https://example.com/video-thumbnail.jpg" alt="Video" style="width: 100%; height: 100%; object-fit: cover;" {}
        }
    )))
}

Constructor Methods

Props::new(ratio: f64, children: Markup) -> Props — Create with custom ratio.
Props::video(children: Markup) -> Props — Create 16:9 ratio (common for video).
Props::four_by_three(children: Markup) -> Props — Create 4:3 ratio.
Props::square(children: Markup) -> Props — Create 1:1 square ratio.

Image, Card, Video player components.

Shadcn reference

https://ui.shadcn.com/docs/components/base/aspect-ratio

Accessibility

No special ARIA attributes; the container is transparent to assistive technology.
Images or videos placed inside should have proper alt text.

← Back to Gallery