hover:scale-110失效主因是img默认为行内元素，transform不生效；需设block/inline-block、父容器固定尺寸+overflow-hidden、添加transition-transform duration-300 ease-in-out，并避免transform:none覆盖。
直接用 hover:scale-110 不会动，也不会居中放大——它只是个 transform 声明，没过渡、没基准、没容器约束，纯写上去大概率“没反应”或“闪一下就跑偏”。
为什么 hover:scale-* 在图片上常失效？
根本原因是 <img> 默认是行内元素，而 CSS 的 transform 对行内元素不生效。Tailwind 的 hover:scale-110 底层就是 transform: scale(1.1)，所以必须先让图片支持变换。
- 给
<img>加inline-block或block（推荐block，还能避免底部空白间隙） - 确保父容器有明确宽高（比如
w-48 h-48），否则scale()缩放基准不确定，不同图效果不一致 - 检查是否被其他样式覆盖：比如写了
transform: none !important，或父级有overflow: hidden但没预留缩放空间，导致放大后全被裁掉，看起来像“没变”
如何让缩放平滑且居中不偏移？
默认 scale() 是以元素中心为原点，但若图片没设 object-fit 或容器没约束尺寸，视觉上仍会“漂移”。关键不是改 transform-origin，而是统一渲染基准。
- 父容器加
overflow-hidden+ 固定尺寸（如w-64 h-64）+rounded-lg -
<img>加block w-full h-full object-cover（封面图/人像）或object-contain（图标类小图） - 显式声明过渡：
transition-transform duration-300 ease-in-out—— 注意必须写在常态样式里，不能只写在hover:下 - 别用
transition简写，它等价于transition: all，可能意外触发动画其他属性，拖慢响应
移动端点击无反应怎么办？
iOS Safari 和多数安卓 WebView 对 :hover 支持极弱，首次点击可能模拟一次，之后就失效，甚至卡在悬停态。这不是 Tailwind 的问题，是浏览器行为。
- 纯展示场景，接受“移动端无缩放”，改用点击展开大图（更可靠）
- 若必须保留视觉反馈，可用
active:scale-105模拟按下态（注意搭配transition-transform） - 别依赖
@media (hover: hover)自动降级——兼容性差，很多安卓机报hover: none却仍响应 hover，反而逻辑混乱
真正容易被忽略的点是：缩放效果是否可感知，取决于父容器是否提前“框住”了图片。没 overflow-hidden 的容器，放大后边缘溢出；没固定尺寸的容器，scale() 的基准是原始图尺寸，小图和大图缩放幅度天差地别。这些都不是动画写得不够 fancy 的问题，而是结构前提没立住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
