Aspect Ratio

Newv0.3.0

指定されたアスペクト比を維持するコンテナ。画像や動画、埋め込みコンテンツの表示に使用します。

基本的な使い方

16:9 のアスペクト比

16:9

tsx

class="token keyword">import { AspectRatio } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">AspectRatio ratio={class="token number">16 / class="token number">9}>
  <class="token tag">div class="token keyword">class=class="token keyword">class="token string">"w-full h-full bg-gradient-to-br class="token keyword">from-accent to-purple-class="token number">500">
    class="token number">16:class="token number">9
  </class="token tag">div>
</class="token tag">AspectRatio>

一般的なアスペクト比

よく使用されるアスペクト比

1:1

4:3

16:9

21:9

画像表示

画像をアスペクト比で表示

正方形

横長

縦長

tsx

<class="token tag">AspectRatio ratio={class="token number">16 / class="token number">9}>
  <class="token tag">img
    src=class="token keyword">class="token string">"https:class="token keyword">class="token commentclass="token keyword">class="token string">">//example.com/image.jpg"
    alt=class="token keyword">class="token string">"Description"
    class="token keyword">class=class="token keyword">class="token string">"w-full h-full object-cover rounded-lg"
  />
</class="token tag">AspectRatio>

動画埋め込み

YouTube等の埋め込み

動画プレースホルダー

16:9 アスペクト比

tsx

<class="token tag">AspectRatio ratio={class="token number">16 / class="token number">9}>
  <class="token tag">iframe
    src=class="token keyword">class="token string">"https:class="token keyword">class="token commentclass="token keyword">class="token string">">//www.youtube.com/embed/..."
    class="token keyword">class=class="token keyword">class="token string">"w-full h-full rounded-lg"
    allow=class="token keyword">class="token string">"accelerometer; autoplay; clipboard-write"
    allowFullScreen
  />
</class="token tag">AspectRatio>

カード内での使用

カードコンポーネントと組み合わせ

記事タイトル 1

2024年1月15日

記事タイトル 2

2024年1月14日

記事タイトル 3

2024年1月13日

地図表示

Google Maps等の埋め込み

地図プレースホルダー

4:3 アスペクト比

Props API

Prop	Type	Default	Description
`ratio`	`number`	`1`	アスペクト比（width / height）

Accessibility

内部のコンテンツに適切なalt属性を設定
iframe には title 属性を設定
コンテナ自体は装飾的な要素として扱われる
レスポンシブに対応（幅に応じて高さが自動調整）