アスペクト比AspectRatio
Experimental

画像、動画、iframe などのメディア枠を、指定した縦横比で保つレイアウトプリミティブです。

状態とバリエーション

動画、ヒーロー、横長のメディアに使う 16:9 の比率です。

16:9 ヒーロー動画

記事サムネイルや標準的な写真枠に使う 4:3 の比率です。

4:3 記事画像

アバター、ロゴ、正方形カードに使う 1:1 の比率です。

1:1 アバター切り抜き

ポスター、縦長カード、人物写真に使う 3:4 の比率です。

3:4 縦長カード

表は横にスクロールできます

プロパティ	型	初期値	説明
ratio	number	1	横幅を高さで割った比率です。16 / 9、4 / 3、1 などを指定します。
asChild	boolean	false	子要素へ props を渡して、div ではなく任意の要素として描画します。
children	ReactNode	-	比率を保つ領域の中に表示する画像、動画、iframe、プレースホルダーです。