hover缩放必须用transform: scale()而非width/height，以避免重排、启用GPU加速并支持平滑过渡；需配合overflow-hidden、object-fit、固定容器尺寸及显式transition-transform声明。
hover 缩放需要 transform 而不是 width/height
直接改 width 或 height 会触发重排（reflow），动画卡顿且无法配合 transition 平滑过渡。必须用 transform: scale() —— 它走 GPU 加速，性能好，也支持过渡动画。
Tailwind 默认的 hover:scale-105 是可行的，但要注意：它默认只作用于元素自身，如果图片父容器没设 overflow-hidden，缩放时可能撑出边界或显示裁切异常。
- 给图片加
transition-transform duration-300 ease-in-out显式声明过渡行为（Tailwind v3.4+ 可简写为transition，但老版本需写全） - 父容器必须加
overflow-hidden，否则缩放后图片边缘会溢出 -
scale-110比scale-105更明显，但别超过scale-125，否则在小图上易糊或失真
图片本身要设 object-fit 和尺寸约束
没设 object-fit 的 <img alt="如何在Tailwind CSS中实现鼠标悬停时平滑缩放的CSS图片展示？" > 在缩放时会拉伸变形；没设宽高限制时，scale() 以原图尺寸为基准，导致不同图缩放幅度不一致。
推荐组合：h-48 w-48 object-cover rounded-lg（固定容器尺寸）+ class="w-full h-full" 给 img 标签，再配 hover:scale-110。
立即学习“前端免费学习笔记（深入）”；
- 避免只写
h-full或w-full而不设父容器尺寸，否则缩放无参照基准 -
object-contain适合图标类小图，object-cover更适合封面图/人像，防止白边 - 如果用
background-image实现，得用bg-center bg-cover+hover:scale-110，但注意 background-size 不响应 transform，得靠伪元素或 wrapper hack
transition 时间和缓动函数选错会导致“弹跳感”
默认 ease 在 hover 进入时偏慢、退出时偏快，容易显得突兀；linear 又太机械。实际体验最好的是 ease-in-out 或更柔和的 ease-out。
- 过渡时间建议 200–300ms：
duration-200到duration-300，低于 150ms 人眼难感知，高于 400ms 显迟滞 - 别只写
transition—— 它默认过渡所有属性，可能意外触发opacity或color动画，应锁定为transition-transform - 如果同时有其他 hover 效果（比如阴影），记得一起加进 transition：例如
transition-transform,transition-shadow duration-300（Tailwind 需用插件或自定义 config 支持多属性）
移动端 hover 不生效？得加 focus-visible 或媒体查询兜底
触摸设备没有 hover 状态，纯 hover:scale-110 在 iPad 或安卓 Chrome 上无效。这不是 bug，是规范行为。
- 简单方案：加
focus-within:scale-110，配合tabindex="0"让容器可聚焦（适合卡片类交互） - 更稳妥：用
@media (hover: hover)包裹 hover 类，再单独写一套active:scale-95做点击反馈（需给 img 或 wrapper 加touch-active类或监听事件） - Tailwind 默认不启用
focus-visible变体，需在tailwind.config.js的variants中显式开启（v3.0+ 已移除 variants，改用plugins: [require('@tailwindcss/forms')]或自定义）
