尝试创建自动调整大小的水平滚动背景图像

问题描述 投票:0回答:1

我正在尝试重新创建这个网页,并且我正在寻找有关我的方法的建议。

我想要实现的目标:

  1. 背景图像的高度始终与屏幕高度匹配,同时保持其纵横比。

  2. 此外,我希望图像在比设备屏幕宽时可以水平滚动。

  3. 无论屏幕大小如何,可点击的热点都保持固定在背景图像上的特定位置。

这是我当前的设置: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>
  );
};
javascript css reactjs responsive-design tailwind-css
1个回答
0
投票

经过大量调试,我发现我初始化的 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>
© www.soinside.com 2019 - 2024. All rights reserved.