Aspect Ratio

Displays content within a desired ratio.

use radix_yew_themes::AspectRatio;
use yew::prelude::*;

#[function_component]
pub fn AspectRatioExample() -> Html {
    html! {
        <AspectRatio ratio={16.0 / 8.0}>
            <img
                src="https://images.unsplash.com/photo-1479030160180-b1860951d696?&auto=format&fit=crop&w=1200&q=80"
                alt="A house in a forest"
                style="object-fit: cover; width: 100%; height: 100%; border-radius: var(--radius-2);"
            />
        </AspectRatio>
    }
}

API Reference

This component inherits props from the Aspect Ratio primitive.