Tailwind CSS：如何使图像从 div 中弹出

Question

这是我的组件的视图：

<section className="embla p-6 lg:p-8 flex flex-col gap-4">
      <div className="embla__viewport" ref={emblaRef}>
        <div className="embla__container">
          {slides.map((item: ProductCollectionWithPreviews) => (
            <div className="embla__slide p-5" key={item.products[0].title}>
              <div className="h-[300px] aspect-video bg-gray-400 rounded-md backdrop-blur-xl bg-opacity-5 flex flex-col overflow-visible">
                <div className="h-[150px] flex items-center justify-center overflow-visible">
                  <div className="relative z-10">
                    <Image
                        src={item.products[0].thumbnail}
                        width={300}
                        height={300}
                        alt="Picture of the product"
                        className="skew-y-2 drop-shadow-2xl"
                    />
                  </div>
                </div>
                <div className="h-[150px] flex items-center p-8">
                  <div className="flex flex-col">
                    <span className="text-xl text-white">{item.products[0].title}</span>
                    <span className="text-sm text-slate-200">{item.products[0].title}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

我试图让图像从 div 中“弹出”，但我得到的只是一张剪切图像。这是现在的样子：

Answer 1

具有

div

类的

embla__viewport

有

overflow: hidden

。也许它正在损害你的形象。但我相信您无法删除

overflow: hidden

，因为这会隐藏轮播中的项目，我建议您添加

padding-top

为

embla__viewport

上的图像腾出空间。