如何用Tailwind CSS实现圆形图片？解决尺寸适配与文字居中问题

当前我的图片显示如上，但我希望它们呈现圆形且每张宽高相等。

目前图片并非正方形，我已添加以下Tailwind CSS代码，但仍无法将所有图片转为圆形：

<div className="cursor-pointer">
        <div className="w-full overflow-hidden rounded-full mb-2  border border-black">
          <img src={banner} alt={title} loading="lazy" className="w-full" />
        </div>
        <h3 className="text-sm md:text-lg font-medium ">{title}</h3>
      </div>

我尝试过多次修改硬编码的宽高，但仍未找到解决方法。非常感谢您的帮助！

编辑补充：
设置w-20和h-20时图片能变成圆形，但设置w-25和h-25时图片又会比例失调，请问这是什么原因？另外，设置w-20和h-20后，文字不再居中，该如何修复？

1. 解决圆形图片比例失调问题 #

w-25失效是因为Tailwind默认没有这个类——它的尺寸类基于4px倍数设计（比如w-20=80px、w-24=96px），自定义尺寸需要额外配置。

要实现圆形且比例正确的图片，核心是先让容器为正方形，再让图片居中裁剪：

• 给图片容器设置固定宽高（如w-24 h-24），保留rounded-full和overflow-hidden
• 给图片添加object-cover和h-full，让图片填充容器并维持比例，超出部分自动裁剪

修改后的代码：

<div className="cursor-pointer text-center">
  <div className="w-24 h-24 overflow-hidden rounded-full mb-2 border border-black mx-auto">
    <img 
      src={banner} 
      alt={title} 
      loading="lazy" 
      className="w-full h-full object-cover" 
    />
  </div>
  <h3 className="text-sm md:text-lg font-medium">{title}</h3>
</div>

2. 自定义"w-25"这类非默认尺寸 #

如果需要100px的尺寸（对应w-25），在tailwind.config.js中添加自定义值：

module.exports = {
  theme: {
    extend: {
      width: {
        '25': '100px',
      },
      height: {
        '25': '100px',
      },
    },
  },
}

配置完成后就能用w-25 h-25设置容器，图片仍保留w-full h-full object-cover即可。

3. 修复文字居中问题 #

给最外层容器添加text-center，同时给图片容器加上mx-auto实现水平居中，就能让图片和文字都对齐居中。

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