Aspect Ratio

from starhtml import *

src = "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=600&q=80"
ratios = [
    ("YouTube", 16 / 9),
    ("Ultrawide", 21 / 9),
    ("Instagram Post", 1),
    ("Portrait Photo", 3 / 4),
]
Div(
    *[
        Div(
            AspectRatio(
                Img(
                    src=src,
                    alt="Mountain lake reframed at different ratios",
                    cls="absolute inset-0 h-full w-full rounded-md object-cover",
                ),
                ratio=ratio,
                cls="rounded-md",
            ),
            P(label, cls="mt-2 text-center text-sm text-muted-foreground"),
        )
        for label, ratio in ratios
    ],
    cls="grid w-full max-w-3xl grid-cols-2 gap-6",
)

from starhtml import *

Div(
    AspectRatio(
        Div(
            Div(
                Icon("lucide:play", cls="size-8 fill-current"),
                cls="flex size-16 items-center justify-center rounded-full bg-white/90 text-black shadow-lg",
            ),
            cls="absolute inset-0 flex items-center justify-center rounded-md bg-gradient-to-br from-zinc-900 to-zinc-700",
        ),
        ratio=4 / 3,
        cls="rounded-md",
    ),
    cls="w-full max-w-md",
)

from starhtml import *

cards = [
    ("https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=400&q=80", "Architecture", "Modern design patterns"),
    ("https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=400&q=80", "Culinary Arts", "Seasonal tasting menus"),
    ("https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400&q=80", "Technology", "Developer workspaces"),
]
Div(
    *[
        Card(
            AspectRatio(
                Img(src=src, alt=title, cls="absolute inset-0 h-full w-full object-cover"),
                ratio=4 / 3,
            ),
            CardHeader(
                CardTitle(title, level="h4"),
                CardDescription(desc),
            ),
            cls="overflow-hidden",
        )
        for src, title, desc in cards
    ],
    cls="grid w-full grid-cols-3 gap-4",
)

from starhtml import *

Div(
    AspectRatio(
        Skeleton(cls="absolute inset-0 rounded-md"),
        ratio=16 / 9,
        cls="rounded-md",
    ),
    cls="w-full max-w-xl",
)