aspect-ratio

4:3 standard aspect ratio

4:3 standard aspect ratio

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

src/aspect-ratio/c-aspect-ratio-2.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="4 / 3" class="bg-muted rounded-xl overflow-hidden border">
      <img :src="PIXEL" alt="4:3" 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-2.json

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

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