Aspect Ratio

Displays content within a desired ratio.

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

#[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={Style::from([
                    ("object-fit", "cover",),
                    ("width", "100%"),
                    ("height", "100%"),
                    ("border-radius", "var(--radius-2)"),
                ])}
            />
        </AspectRatio>
    }
}

API Reference

This component inherits props from the Aspect Ratio primitive.