如何设置ShadCN UI的Carousel组件整体尺寸并适配内容？

核心修改步骤 #

• 固定Carousel容器尺寸：替换原Carousel的className为w-1/2 h-[32rem]，直接设置宽度为页面的50%、高度为32rem，同时移除原有的max-w-xl限制。
• 让子元素填满容器：给CarouselItem添加h-full类，确保每个轮播项占满Carousel高度；同时给Card和CardContent都加上h-full，让卡片内容区域完全填充轮播项空间。
• 自适应文字大小：将固定的text-3xl替换为text-[clamp(1.5rem,4vw,4rem)]，通过clamp()函数让字体在1.5rem到4rem之间根据容器宽度自动缩放，避免内容溢出或过小。
• 调整内边距适配：微调CardContent的内边距为p-4，保证内容在容器内有合理的留白。

修改后的完整代码 #

"use client";
import Autoplay from "embla-carousel-autoplay";
import { Card, CardContent } from "@/components/ui/card";
import {
    Carousel,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
} from "@/components/ui/carousel";
import { ThemeToggle } from "@/components/theme-toggle";
import Link from "next/link";

export default function Home() {
    return (
        <div className="flex flex-col items-center justify-center h-screen">
            <div className="flex-grow text-center">
                <Link href="/login">Login</Link>
                <ThemeToggle />
                <Carousel
                    opts={{
                        loop: true,
                        align: "center",
                    }}
                    plugins={[
                        Autoplay({
                            delay: 5000,
                        }),
                    ]}
                    className="w-1/2 h-[32rem]"
                >
                    <CarouselContent>
                        {Array.from({ length: 5 }).map((_, index) => (
                            <CarouselItem key={index} className="h-full p-1">
                                <Card className="h-full">
                                    <CardContent className="flex items-center justify-center h-full p-4">
                                        <span className="font-semibold text-[clamp(1.5rem,4vw,4rem)]">
                                            {index + 1}
                                        </span>
                                    </CardContent>
                                </Card>
                            </CarouselItem>
                        ))}
                    </CarouselContent>
                    <CarouselPrevious />
                    <CarouselNext />
                </Carousel>
            </div>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者FlyingFish