如何用Tailwind CSS实现小屏容器内图片垂直居中并隐藏溢出

直接调整两处设置就能实现需求：

1. 修改图片的裁剪对齐方式 #

把Image组件的object-top替换为object-center——这个属性控制图片被裁剪时的对齐位置，原object-top会固定显示图片顶部区域，换成object-center后，图片会在容器内垂直居中展示。

2. 容器添加居中布局（可选优化） #

给图片外层容器追加flex items-center justify-center，确保图片能在容器内完全居中对齐，同时保留overflow-hidden属性来隐藏超出容器的图片部分。

修改后的完整代码 #

<div className='flex flex-col justify-center py-3'>
  <div className='md:mx-auto overflow-hidden h-32 md:h-full flex items-center justify-center'>
    <Image
      src='/hotel-empire.jpeg'
      width={600}
      height={400}
      // fill={true}
      className='object-cover object-center'
      alt='Test'
    />
  </div>
  <div className='py-3'>
    ...
  </div>
  <div>
    ....
  </div>
</div>

效果说明 #

• 小设备下容器高度固定为h-32，超出容器的图片部分会被overflow-hidden隐藏
• object-cover保证图片按比例填充容器，不会出现拉伸变形
• object-center让图片主体区域居中显示，替代原有的顶部对齐效果

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