アスペクト比AspectRatioExperimental
画像、動画、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、プレースホルダーです。 |
使い方
Loading...