Aspect Ratio

import { AspectRatio, Box } from "astralis-ui";

export function AspectRatioDemo() {
  return (
    <Box w="full" maxW="sm">
      <AspectRatio ratio="wide" rounded="xl" overflow="hidden">
        {/* The single child stretches to fill the frame; img/video get object-cover. */}
        <img src="/placeholder.svg" alt="A starfield gradient" />
      </AspectRatio>
    </Box>
  );
}

import { AspectRatio, Center, Text, Grid, VStack } from "astralis-ui";

const ratios = ["square", "landscape", "portrait", "wide", "golden"] as const;

export function AspectRatioRatios() {
  return (
    <Grid columns={{ base: "2", md: "3" }} gap="4" w="full" maxW="md" alignItems="end">
      {ratios.map((ratio) => (
        <VStack key={ratio} gap="1" alignItems="stretch">
          <Text as="span" size="xs" color="muted">{ratio}</Text>
          <AspectRatio ratio={ratio} rounded="lg" overflow="hidden">
            <Center bg="pink-subtle">
              <Text size="xs" color="muted">{ratio}</Text>
            </Center>
          </AspectRatio>
        </VStack>
      ))}
    </Grid>
  );
}