Aspect Ratio

Displays content within a desired ratio.

Overview

横屏内容的默认比例，对应 shadcn 的 ratio={16 / 9} 示例。

GPUI · Live previewGPUI WASM

Installation

Aspect Ratio 是单个 Rust 文件（src/aspect_ratio.rs），底层就是 GPUI 布局系统的 aspect_ratio 样式。复制到你的 crate，或下载完整示例直接运行。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# aspect_ratio.rs is a thin styled wrapper over5# gpui's layout-level aspect_ratio, no primitives6# needed beyond div + canvas.

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --aspect-ratio34# Other demos:5cargo run --locked -- --aspect-ratio square6cargo run --locked -- --aspect-ratio portrait

Usage

容器取父级全宽，高度按 ratio（宽 ÷ 高）推导。媒体内容作为 child 放进去，配合 overflow_hidden 裁圆角。

Example.rs

1use justdo_command::aspect_ratio::AspectRatio;23// Width comes from the parent; height = width / ratio.4div().w(px(460.)).child(5    AspectRatio::new(16. / 9.)6        .rounded_lg()7        .overflow_hidden()8        .child(img("photo.png"))9)

网页预览与桌面端运行同一份 Rust / GPUI 组件；演示中的风景占位图由 canvas + PathBuilder 绘制。

Notes

Sizing

比例约束作用在「宽已知、高推导」的方向上——外层只给定宽度。放进固定高度容器时请改给子元素定宽，或调整 w_full 为具体宽度。

Media

内部媒体元素建议 size_full 撑满比例框；canvas 没有固有尺寸，必须显式充满父级才能拿到真实的绘制 bounds。

API Reference

组件是无状态的布局元素，样式方法（rounded_lg、overflow_hidden 等）直接由 Styled 提供。

API	Signature	Notes
`AspectRatio::new(..)`	`ratio: f32`	Width ÷ height, e.g. 16./9., 1., 9./16.
`.child(..)`	`impl IntoElement`	Content rendered inside the ratio box.
`Styled methods`	`rounded_, overflow_`	Standard tailwind-style modifiers apply directly.

Source & inspiration

参考 shadcn/ui Aspect Ratio 。本页预览由 Rust / GPUI 绘制，比例布局来自 gpui 的 taffy 引擎。