object-fit不是万能开关，必须配合容器明确宽高（如w-full）、flex行为修正（如flex-0）及object-position等才能防变形；单独添加无效，因浏览器需稳定外框作为缩放基准。
object-fit 不是万能开关，它只在图片有稳定外框时才起作用。单独加 object-contain 或 object-cover 却没约束容器尺寸，基本等于没写。
为什么 object-fit 加了还是拉伸或留白异常
根本不是类名拼错，而是浏览器压根没“框”可填——object-fit 需要明确的宽高基准才能计算缩放比例。
- 父容器没设
w-full、max-w-md或flex-1，导致宽度不可测，高度直接塌陷 -
aspect-video被加在<img alt="Tailwind CSS中图片拉伸变形该如何修复？" >标签上（它只对容器生效） - 写了
h-48又同时写h-auto（JS 动态插入时常见），后者覆盖前者，高度归零 - Tailwind 默认给
img加了max-w-full，若父容器是 flex 且未配shrink-0或flex: 0 0 auto，图片会被横向压缩或纵向拉伸 - Safari 15.3 及更早版本完全不支持
aspect-ratio，且静默失败，不会报错也不会 fallback
flex 容器里图片坍缩成细线或被拉扁
这是最典型的失效场景：父元素 display: flex，子元素 <img alt="Tailwind CSS中图片拉伸变形该如何修复？" > 没做任何 flex 行为修正，浏览器按默认规则处理替换元素。
- 必须加
flex: 0 0 auto（不能只写shrink-0）——它等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，锚定图片固有尺寸 - 同步加
width: auto; height: auto，否则 Tailwind 的 Preflight 会重置掉 intrinsic 尺寸 - 嵌套多层 flex（如卡片 → 内容区 → 图片区）时，在
<img alt="Tailwind CSS中图片拉伸变形该如何修复？" >或其**直接父容器**上加min-w-0，解除浏览器默认的min-width: auto限制 - 若父容器是
flex-direction: column，flex-basis控制的是高度，此时要额外检查max-h-48和object-fit是否协同
响应式圆角头像为何 hover 才变圆或边缘露直角
rounded-full 只设圆角半径，不裁剪内容也不控制缩放。漏掉任意一环，圆形就立不住。
-
<img alt="Tailwind CSS中图片拉伸变形该如何修复？" >必须同时有w-12 h-12（等宽高等尺寸）、rounded-full、overflow-hidden、object-cover - 别把
rounded-full加在<img alt="Tailwind CSS中图片拉伸变形该如何修复？" >上，而把overflow-hidden加在父<div> 上——两者不在同一层，裁剪和圆角无法对齐 <li>响应式断点（如 <code>md:w-16）下，必须成对写md:overflow-hidden和md:object-cover，否则大屏一放大就破圆 - 某些 UI 库（如 DaisyUI）在 focus/hover 时注入
ring类，而ring默认带border-radius: 0，会覆盖rounded-full；必要时用!rounded-full强制 - 检查
tailwind.config.js中的content字段是否覆盖所有模板路径（React 项目必须含"./src/**/*.{js,jsx,ts,tsx}"） - 禁用动态拼接类名：
className={`aspect-[${w}/${h}]`}→ JIT 模式扫描不到，得写死或用条件判断 - 确认 Tailwind 版本 ≥ v3.3：
npm list tailwindcss；v3.2 及更早需手动开启experimental: { aspectRatio: true } - 避免同时启用
@tailwindcss/aspect-ratio插件又没关内置aspectRatio，两个方案冲突会导致静默失效
如何验证 aspect-ratio 是否真正生效
打开 DevTools → Elements → Computed 面板，搜索 aspect-ratio。如果没出现或显示 unset，说明 Tailwind 根本没生成该规则。
立即学习“前端免费学习笔记（深入）”；
object-fit 依赖外框稳定、rounded-full 依赖 overflow-hidden、aspect-ratio 依赖父容器有可测量宽度——这些不是可选项，是协同生效的最小闭环。
