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.