Tailwind CSS如何实现图片超出Div向外突出显示？

问题原因 #

你的图片被裁剪是因为Embla轮播默认的.embla__viewport样式设置了overflow:hidden——即便你给内层卡片和图片容器加了overflow-visible，超出视口的部分还是会被这个外层视口裁剪掉。

具体修改步骤 #

1. 调整Embla视口的溢出属性 #

给embla__viewport添加overflow-visible类，覆盖默认的隐藏溢出设置：

<div className="embla__viewport overflow-visible" ref={emblaRef}>

2. 偏移图片实现突出效果 #

通过相对定位让图片向上/向下偏移，超出卡片容器范围。修改图片外层的div：

<div className="relative z-10 top-[-60px]">
  <Image
    src={item.products[0].thumbnail}
    width={300}
    height={300}
    alt="产品图片"
    className="skew-y-2 drop-shadow-2xl"
  />
</div>

你可以根据需求调整top的值（比如-40px、-60px）控制向上突出幅度；若要向下突出，改用bottom-[-XXpx]即可。

3. 优化轮播视觉体验（可选） #

修改视口溢出后，滑动时其他轮播项的内容可能会显示在当前视口外：

• 若不想出现这种情况，给最外层.embla容器加overflow-hidden，但图片只能突出到轮播组件边界内；
• 若希望图片完全突出到组件外部，保留.embla默认设置，同时给页面body加overflow-x-hidden避免出现横向滚动条。

修改后的完整代码示例 #

<section className="embla p-6 lg:p-8 flex flex-col gap-4">
  <div className="embla__viewport overflow-visible" 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 top-[-60px]">
                <Image
                    src={item.products[0].thumbnail}
                    width={300}
                    height={300}
                    alt="产品图片"
                    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>

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