aspect-ratio

3:2 classic photography aspect ratio

3:2 classic photography aspect ratio

Загрузка превью…

src/aspect-ratio/c-aspect-ratio-6.vue

<script setup lang="ts">
import { AspectRatio } from "@/components/ui/aspect-ratio"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
</script>

<template>
  <div class="w-full max-w-md">
    <AspectRatio :ratio="3 / 2" class="bg-muted rounded-xl overflow-hidden border">
      <img :src="PIXEL" alt="3:2" width="1000" height="800" class="h-full w-full object-cover" />
    </AspectRatio>
  </div>
</template>

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-aspect-ratio-6.json

Зависимости реестра

Источник: порт из ReUI (Keenthemes, MIT)