我正在尝试重新创建这个网页,并且我正在寻找有关我的方法的建议。
我想要实现的目标:
背景图像的高度始终与屏幕高度匹配,同时保持其纵横比。
此外,我希望图像在比设备屏幕宽时可以水平滚动。
无论屏幕大小如何,可点击的热点都保持固定在背景图像上的特定位置。
这是我当前的设置:CodeSandBox
export const Bedroom = ({ blurDataURL, hotspots }: BedroomProps) => {
return (
<section id="bedroom">
<div className="h-screen w-auto relative ">
{/* I aim to resize this image so that its height matches the screen height while preserving its aspect ratio. Additionally, I want the image to be horizontally scrollable when it's wider than the device screen. Ideally, I would also remove the object-cover property as it woulld affect the hotspots' positioning. My tech stack includes Next.js, Tailwind CSS, and Typescript. */}
<Image
src={src}
alt={title}
placeholder="blur"
blurDataURL={blurDataURL}
width={4000}
height={2500}
className={cn("h-full w-full object-cover")}
/>
{hotspots.map((hotspot, index) => (
<div
key={index}
className="absolute"
style={{
left: hotspot?.position?.left,
top: hotspot?.position?.top,
transform: "translate(-50%, -50%)",
}}
>
<Popover>
<PopoverTrigger asChild>
<div className="relative size-10 flex items-center justify-center cursor-pointer">
<div className="bg-white rounded-full p-3 animate-slow-ping opacity-65" />
<div className="bg-white rounded-full p-1 animate-none shadow absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-2" />
</div>
</PopoverTrigger>
<PopoverContent
className={cn(
GeistSans.className,
"rounded-full capitalize text-sm lg:text-base font-medium tracking-tight px-4 py-1.5"
)}
>
<a href={hotspot?.href}>
<div>{hotspot?.name}</div>
</a>
</PopoverContent>
</Popover>
</div>
))}
</div>
</section>
);
};
经过大量调试,我发现我初始化的 Lenis 实例是阻止我水平滚动的罪魁祸首。
我之前没有注意到这一点,因为我的应用程序上的这个特定页面应该是 100svh,而其他页面不需要水平滚动。
在对实例进行路由检查后,我能够想出这个,很大程度上受到原始网页的启发:
<section id='bedroom'>
<div
className='relative overflow-x-auto overflow-y-hidden'
>
<div className='relative h-[100svh] aspect-[16/10] lg:w-full'>
<picture className='h-[100svh] aspect-[16/10] lg:object-cover object-center'>
<source media='(min-width: 1024px)' srcSet={`${src}?w=4000`} />
<source media='(min-height: 600px)' srcSet={`${src}?w=2560`} />
<source media='(min-height: 500px)' srcSet={`${src}?w=1920`} />
<Image
src={`${src}?w=1024`}
alt={title}
placeholder='blur'
blurDataURL={blurDataURL}
width={4000}
height={2500}
className='h-[100svh] aspect-[16/10] lg:object-cover'
priority
/>
</picture>
<div className='absolute inset-0'>
{hotspots.map((hotspot, index) => (
<BedroomHotspot
hotspot={hotspot}
key={index}
/>
))}
</div>
</div>
</div>
</section>