最稳妥方案是用transform: scale()配合transition实现hover放大，需设display: block、transform-origin: center、overflow: hidden及translateZ(0)启用GPU加速，并用媒体查询隔离触屏设备。
用 CSS transform 实现 hover 图片放大最稳妥
直接改 width 和 height 会导致布局重排，页面跳动；而 transform: scale() 是合成层操作，性能好、无抖动，且支持平滑过渡。
关键点在于：必须给图片加 display: block（或设为 inline-block），否则默认 inline 元素的 transform 在部分浏览器中表现异常。
实操建议：
- 给图片容器（如
<div>或直接作用于<img>）设置overflow: hidden，避免放大后边缘溢出 - 过渡动画用
transition: transform 0.3s ease，别用all，避免意外触发其他属性变化 - 推荐缩放值控制在
scale(1.1)～scale(1.3)之间，过大容易糊或遮挡相邻元素
<img src="photo.jpg" alt="示例图" class="zoom-img">
.zoom-img {
display: block;
transition: transform 0.3s ease;
max-width: 100%;
}
.zoom-img:hover {
transform: scale(1.2);
}
父容器加 overflow: hidden 后图片被裁切怎么办
这是最常踩的坑：只加了 overflow: hidden 却没预留缩放空间，导致图片一 hover 就“被砍头”。根本原因是 transform: scale() 以元素中心为原点缩放，但默认定位是左上角对齐，放大后右下部分直接越界。
立即学习“前端免费学习笔记（深入）”；
解决思路不是去掉 overflow，而是让缩放有“呼吸空间”：
- 给图片加
transform-origin: center（虽是默认值，但显式声明更稳） - 把图片包进一个带内边距的容器里，比如
padding: 10px，再对容器设overflow: hidden - 或者用
position: relative+left/top微调偏移，但不如 padding 可靠
不推荐用负 margin 拉回，容易破坏流式布局。
移动端 touch 设备上 hover 不生效怎么处理
iOS Safari 和多数安卓浏览器在非“桌面模式”下不触发 :hover，哪怕用户点了也不会放大。这不是 bug，是规范行为。
要兼容触摸设备，得换思路：
- 加
@media (hover: hover) and (pointer: fine)媒体查询，只对鼠标设备启用 hover 效果 - 对触屏设备，改用 JavaScript 监听
touchstart，动态加 class 触发缩放（注意防重复绑定） - 更轻量的做法：直接用
cursor: zoom-in提示用户可点击，配合图片本身支持原生缩放（需viewport设置合理）
纯 CSS 方案无法覆盖所有触屏场景，这点必须接受。
图片模糊或出现锯齿怎么优化
放大后模糊，通常不是代码问题，而是图片分辨率不够或浏览器渲染策略所致。常见诱因：
- 原始图尺寸太小（比如只有 200×200），强行
scale(1.5)就等于拉伸到 300×300，必然失真 - 未开启硬件加速，可在缩放样式里加
transform: scale(1.2) translateZ(0)强制 GPU 渲染 - 某些旧版 Chrome 对
img的transform抗锯齿处理差，可尝试加image-rendering: -webkit-optimize-contrast（仅作缓解）
真正可靠的解法：提供至少 2x 分辨率的源图，用 srcset 配合响应式，让浏览器选合适尺寸加载。
