hover:scale-105没反应主因是父容器overflow:hidden或未设transform-origin；需改overflow-visible、加transition-transform和transform-origin-center；移动端hover不可靠，应改用javascript或focus-within；放大模糊源于亚像素渲染，建议提高原图分辨率或慎用will-change。
hover:scale-105 为什么没反应？检查父容器是否禁用 transform
直接给 <img> 加 hover:scale-105 却没效果，大概率是父元素（比如 <div>）默认设置了 <code>overflow: hidden 或者没有定义 transform-origin 行为。Tailwind 的 scale 是基于 CSS transform 实现的，而 transform 会创建新的层叠上下文和包含块 —— 如果父容器裁剪了溢出内容，放大的部分就被切掉了。
实操建议：
- 确保图片父容器有
overflow-visible（或干脆不设overflow） - 加
transition-transform duration-300 ease-in-out让缩放更自然（scale本身不带过渡） - 可选：加
transform-origin-center避免偏移放大（尤其图片宽高不等时）
怎样让图片悬停时只放大、不位移？注意 scale 默认以左上角为原点
Tailwind 的 scale-* 类默认以元素左上角为变换原点（transform-origin: 0 0），所以 hover:scale-110 往往看起来像“右下角拉伸”，实际是整个框在放大，左上角钉死导致视觉偏移。
解决方法很简单：
- 必须搭配
hover:scale-110使用transform-origin-center（或transform-origin-50%_50%） - 如果图片在 Flex 容器中，确认父级没设
align-items: flex-start等导致对齐偏移 - 避免同时用
translate-x-*类干扰定位
示例结构：
<div class="overflow-visible inline-block"> @@##@@ </div>
移动端 hover 不触发？别依赖 hover 类做核心交互
在 iOS Safari 和多数安卓浏览器中，:hover 伪类仅在桌面模拟器或鼠标连接设备下可靠；真机触摸时通常只在首次点击后短暂生效，且无“悬停持续态”。这意味着 hover:scale-* 在手机上基本不可靠。
如果你需要跨端一致的放大反馈：
- 改用
focus-within+tabindex模拟（适合可聚焦容器） - 用 JavaScript 监听
touchstart切换 class（如active:scale-110） - 或直接放弃“悬停放大”，改用点击展开 Lightbox —— 对用户也更明确
注意：Tailwind 默认不生成 active:* 响应类，需在 tailwind.config.js 的 variants.extend 中显式开启 active。
图片模糊了？scale 放大触发了亚像素渲染问题
当图片被 scale(1.05) 这类非整数倍放大时，浏览器会重新采样像素，尤其在 Retina 屏或缩放非 100% 的系统下，容易出现发虚、边缘锯齿或色带。这不是 Tailwind 的 bug，而是 CSS transform 的固有限制。
缓解方式：
- 优先使用
object-fit: cover+ 固定宽高容器，让原图分辨率足够高（比如 2x 尺寸） - 加
will-change-transform提示浏览器优化渲染路径（慎用，可能引发额外内存开销） - 避免过度放大（
hover:scale-125比hover:scale-150更安全） - 不用
scale，改用max-w-full max-h-full配合hover:w-[calc(100%+8px)]等尺寸类（但失去平滑过渡）
真正要兼顾清晰度和动效，得接受：纯 CSS 方案总有妥协。关键交互点上，该上 Canvas 或 img 标签外层套 SVG clipPath 的时候，就别硬扛 scale。
