aspect-ratio类必须作用于容器而非img标签，且容器需有明确宽度（如w-full）、块级显示、未设height；img需加block/inline-block、w-full、h-full及object-fit，否则拉伸或塌陷。
直接结论：用 aspect-ratio 类控制容器，而不是图片本身；img 元素必须脱离默认行内行为，且需配合 object-fit 或 max-w-full 防溢出。
为什么 aspect-video 加了但图片还是拉伸或塌陷？
根本不是类名写错，而是 aspect-ratio 只作用于容器（比如 <div>），对 <img> 标签无效。浏览器需要一个有明确宽度的块级上下文来推导高度。
- 父容器没设宽度：比如只写
<div class="aspect-video"><img src="..."></div>，但没加w-full、max-w-md或flex-1 - 容器 display 被覆盖：若父是
flex，子项默认display: flex，此时aspect-ratio会被忽略——得显式加block或inline-block - 写了
h-48或absolute：这些会强制高度，直接绕过比例计算逻辑 - Safari 15.3 及更早版本不支持
aspect-ratio，且静默失败，不会报错也不会 fallback
hover:scale-110 对图片没反应？先检查这三件事
img 默认是行内元素，transform 不生效，所以 hover:scale-* 看似写了，实则被忽略。
- 必须给
img加inline-block或block——flex容器里的子项也默认是flex，同样要覆盖 - 避免父容器设了
overflow-hidden且没预留缩放空间，否则图片放大后被裁掉，看起来“动都没动” - 确认没其他样式覆盖
transform，比如手动写了transform: none或用了!important
最简可用组合：inline-block origin-center transition-transform duration-300 ease-in-out hover:scale-110
立即学习“前端免费学习笔记（深入）”；
移动端真机上 hover 缩放失效，怎么办？
iOS Safari 和多数安卓 WebView 不触发 :hover，纯 hover:scale-* 在触摸设备上基本无用。
- 改用
group+group-hover：把 hover 绑定到父容器（如带cursor-pointer的<div>），图片加group-hover:scale-110 - 加
touch-action: manipulation提升点击响应灵敏度 - 需要鼠标跟随缩放中心？Tailwind 不支持动态
transform-origin，得回退到手写 CSS + JS 监听clientX/clientY
自定义宽高比（比如 4/3、21/9）怎么写？
Tailwind 默认只提供 aspect-square、aspect-video、aspect-poster 等有限预设。要写任意比例，必须启用任意值语法或配置插件。
- 最轻量方案：直接用
aspect-[4/3]或aspect-[21/9]—— Tailwind v3.3+ JIT 模式原生支持斜杠写法 - 确保
tailwind.config.js中content字段覆盖所有模板路径，否则 JIT 扫不到动态类名 - 禁用
@tailwindcss/aspect-ratio插件（如果已升级到 v3.3+），否则两个方案冲突，aspect-[x/y]可能静默失效
真正容易被忽略的是：aspect-ratio 只管容器尺寸，不管内容怎么填。漏掉 object-contain、object-cover 或 max-w-full，图片照样会溢出或拉伸——它和容器比例是两套独立逻辑。
