overflow: hidden 是缩放前的必要步骤，因不加时图片缩放会撑开父容器或溢出边界，违背局部放大效果；它必须作用于有明确宽高的父容器，而非 img 元素本身。
overflow: hidden 为什么是缩放前的必要步骤
不加 overflow: hidden 的容器，图片缩放后会撑开父元素或溢出边界，视觉上“弹出来”而不是“被裁切着放大”。这和你想实现的「局部放大」效果完全相反。它不是可选项，而是约束 transform 行为的边界条件。
- 父容器必须有明确宽高（比如
width: 300px; height: 200px;），否则overflow: hidden可能无效 - 不要对
img元素本身设overflow: hidden——它没用，overflow必须作用在**包裹它的容器**上 - 如果用了 Flex 或 Grid 布局，确认父容器没有
align-items: stretch类似行为干扰高度计算
transform: scale() 的触发时机与过渡控制
直接写 img:hover { transform: scale(1.2); } 会瞬间跳变。必须配合 transition 才有缓动效果，且要明确指定过渡属性和时长，否则部分浏览器可能忽略。
- 推荐写法：
transition: transform 0.3s ease;—— 只过渡 transform，避免连带其他属性拖慢性能 - 别写
transition: all 0.3s;，尤其当图片还带opacity或filter时，容易引发意料外重绘 - scale 值建议控制在 1.0–1.5 之间；超过 1.6 容易因像素插值导致边缘模糊，尤其在 Retina 屏上更明显
为什么 img 要设 display: block
默认 img 是 inline 元素，底部会有几像素空白间隙（来自基线对齐）。这个间隙在缩放时会被放大、错位，甚至让容器下边框“露白”。
- 最简解决：给
img加display: block; - 替代方案：父容器设
font-size: 0;，但会影响内部其他文字，不推荐 - 如果必须保留 inline 行为（比如图文混排），改用
vertical-align: top;也能压掉间隙
缩放中心点偏移问题（transform-origin）
默认 transform-origin: 50% 50%，也就是居中缩放。但有时你希望图片从左上角“生长”，或悬停时焦点在人物脸部——就得手动调原点。
- 想以左上角为基点：
transform-origin: 0 0; - 想让缩放更“跟手”，可以结合
transform-origin: center center;+will-change: transform;提升渲染优先级（仅对频繁交互的区域启用） - 注意：
transform-origin必须写在 hover 规则里，和transform在同一选择器下才生效
实际缩放效果是否自然，往往卡在父容器尺寸是否稳定、transition 是否精准绑定到 transform、以及 origin 是否匹配视觉预期这三个地方。漏掉任意一个，都会让“hover 缩放”变成页面抖动源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
