父容器必须设宽高并加overflow:hidden才能截断缩放溢出，transition应仅用transform而非width/height，且需写在正常态；scale基点默认居中，模糊可用will-change或image-rendering优化；移动端hover需js配合。
hover 缩放图片时内容溢出容器
直接加 transform: scale(1.2) 后图片撑破父容器，是因为缩放不触发重排，但视觉尺寸变大，而父容器默认 overflow: visible，内容自然“跑出来”。overflow: hidden 是唯一可靠截断方式，不是“辅助手段”，是必须项。
- 父容器必须显式设置
overflow: hidden，不能依赖继承或浏览器默认 - 父容器需有明确宽高（如
width/height或max-width），否则overflow: hidden在某些场景下无效（比如 flex 子项未设宽） - 避免给图片本身设
overflow: hidden—— 图片是替换元素，该属性对其无效
transition 用 transform 而不用 width/height
用 width 和 height 做 hover 动画会触发 layout（重排），性能差，尤其在列表中多个图片同时 hover 时卡顿明显。而 transform 只走合成器线程，GPU 加速，顺滑得多。
- 过渡必须写在父容器或图片上：
transition: transform 0.3s ease，不能只写transition: all（太宽泛，可能意外过渡其他属性） - scale 基点默认是中心（
transform-origin: center），若想从左上角缩放，得加transform-origin: top left - IE10+ 支持
transform，但 IE 旧版本不支持transition，如需兼容，得加-ms-前缀（不过现在基本可忽略）
图片模糊或边缘锯齿问题
缩放后出现模糊、发虚或像素边缘锯齿，常见于 chrome 和 safari —— 这是 subpixel 渲染和 GPU 合成策略导致的，并非代码写错。
- 加
will-change: transform提前告知浏览器将做变换，有助于优化渲染路径（但别滥用，每个都加会反效果） - 对图片加
image-rendering: -webkit-optimize-contrast或image-rendering: crisp-edges可缓解模糊，但兼容性有限，Safari 效果最明显 - 确保原始图片分辨率足够（比如要缩放到 1.2×，原图至少比容器宽高多出 20% 像素余量），否则放大后必然糊
移动端 touch 设备无 hover 效果
iphone、ipad 等设备默认不触发 :hover，哪怕手指长按也不会激活（ios Safari 的 hover 行为极其保守）。这不是 bug，是设计使然。
立即学习“前端免费学习笔记（深入）”；
- 不要指望纯 css hover 在移动端“自动生效”，必须配合 JS 检测
touchstart并切换 class（例如加.is-hovered） - 如果只做响应式适配，可用媒体查询 +
@media (hover: hover) and (pointer: fine)包裹 hover 规则，让触屏设备直接跳过 - 慎用
ontouchstart在页面加载时绑定，iOS Safari 有延迟，建议用事件委托或监听touchstart到父容器
实际最常被忽略的是：父容器没设宽高时，overflow: hidden 形同虚设；以及把 transition 错写在伪类里（比如 a:hover { transition: … }），这会导致动画只在离开时触发一次。