图片变形的根本原因是未正确配置 object-fit、宽高约束和 flex 行为。w-64 h-64 仅设容器尺寸，需配合 object-cover 或 object-contain；flex 中 img 需加 flex-0 和 w-auto h-auto；aspect-video 要求父容器有明确宽度；rounded-full 必须与 overflow-hidden、object-cover 及等宽高等条件共存。
图片变形不是 Tailwind 本身的问题，而是你没告诉浏览器“怎么缩放才不拉伸”——object-fit、宽高约束、Flex 行为三者缺一不可。
为什么加了 w-64 h-64 图片还是被拉伸
因为 w-64 h-64 强制设定了盒子尺寸，但没指定内容如何填充。默认 object-fit: fill 会无视原始比例强行撑满，结果就是压扁或拉长。
- 必须显式加
object-cover（裁切居中填满）或object-contain（完整显示、留白） - 别只写
object-cover而漏掉w-full h-full：它只在有明确宽高框的前提下生效 - 如果图片来自 CMS 或 API，原始尺寸不规则，
object-contain更安全；头图/卡片图优先用object-cover
Flex 容器里图片突然变成一条细线
这是 flex-shrink: 1 在偷偷压缩——img 是替换元素，默认会被 Flex 主动缩小，哪怕你写了 w-48。
- 给
img加flex-shrink-0或更稳的flex-0（等价于flex: 0 0 auto） - 同步加
w-auto h-auto，防止框架重置（如 Preflight）覆盖原始比例 - 嵌套 Flex 时，若图片仍坍缩，在
img或其直接父容器上加min-w-0
aspect-video 加了却没高度
这不是类名拼错，是 aspect-ratio 根本没算出高度——它需要一个可测量的宽度作为基准，宽度为 0 就无法推导。
- 容器必须有显式宽度来源：
w-full、max-w-lg、flex-1（在 flex 容器中）、col-span-2（在 grid 中） -
aspect-video只对容器生效，不能加在img标签上 - 别同时写
h-full或absolute top-0 bottom-0，它们会直接覆盖aspect-ratio的自动高度 - Safari 15.3 及更早版本不支持
aspect-[9/16]斜杠语法，改用小数写法：aspect-[0.5625]
圆形头像边缘露直角或 hover 才变圆
rounded-full 只设圆角半径，不裁剪也不约束尺寸——它和 overflow-hidden、object-cover 是绑定关系，少一个就失效。
-
img必须有相等的宽高：w-12 h-12、sm:w-14 sm:h-14，且响应式类要成对出现 -
rounded-full和overflow-hidden必须作用于同一元素（推荐直接加在img上） - 必须加
object-cover：否则图片会拉伸或上下留白，破坏圆形边界 - 某些 UI 库（如 DaisyUI）在 focus/hover 时注入
ring类，而ring默认带border-radius: 0，会覆盖rounded-full
真正卡住人的从来不是“该用哪个类”，而是把 object-fit 当开关、把 aspect-ratio 当魔法、把 rounded-full 当万能药——它们都依赖前提条件，漏掉任意一个，表现就完全失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
