アスペクト比

希望のアスペクト比でコンテンツを表示します。

<script setup lang="ts">
import { AspectRatio } from 'radix-vue'
</script>

<template>
  <div class="shadow-blackA7 w-full sm:w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
    <AspectRatio :ratio="16 / 9">
      <img
        class="h-full w-full object-cover"
        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
        alt="Landscape photograph by Tobias Tullius"
      >
    </AspectRatio>
  </div>
</template>

機能

• 任意のカスタム比率を受け入れます。

インストール

コマンドラインからコンポーネントをインストールします。

$ npm add radix-vue

構造

コンポーネントをインポートします。

<script setup>
import { AspectRatio } from 'radix-vue'
</script>

<template>
  <AspectRatio />
</template>

APIリファレンス

ルート

指定された比率に制限したいコンテンツを含みます。

プロパティ	デフォルト	型
as	'div'	AsTag | コンポーネント このコンポーネントがレンダリングされるべき要素またはコンポーネント。asChildによって上書きできます。
asChild		boolean 子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。 詳細については、コンポジションガイドをご覧ください。
ratio	1	number 希望のアスペクト比。例：16/9

スロット (デフォルト)	ペイロード
aspect	number 現在のアスペクト比（％）