如何用Tailwind CSS实现圆形图片叠加居底圆角居中文本并保持等比缩放

核心是用固定宽高比的圆形容器配合相对单位实现等比例缩放，具体实现代码和说明如下：

完整代码示例 #

<!-- 外层容器：仅需修改width和font-size即可整体等比例缩放 -->
<div class="relative w-[200px] aspect-square rounded-full overflow-hidden text-base">
  <!-- 背景图片 -->
  <img src="https://picsum.photos/400/400" alt="头像" class="absolute inset-0 w-full h-full object-cover">
  <!-- 底部文本层 -->
  <div class="absolute bottom-0 w-full text-center bg-black/60 text-white rounded-b-full py-2">
    示例文本
  </div>
</div>

实现说明 #

• 等比例缩放逻辑：外层容器只设置宽度，通过aspect-square强制高度等于宽度，所有内部元素的尺寸都相对于容器适配。需要放大/缩小时，仅需修改外层容器的width值和font-size值即可，内部的文字大小、内边距会自动同步等比例变化，无需调整其他属性。
• 文本样式说明：rounded-b-full让文本背景的底部弧度和圆形容器完全匹配，text-center实现文字水平居中，半透明背景可以根据需求调整颜色和透明度。
• 适配性说明：图片通过object-cover保证在容器缩放时不会变形，始终铺满圆形区域。

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