直接用 transform: scale() 配合 transition 可实现平滑放大，但需设置 transform-origin: center、父容器 overflow: hidden 且避免重排，移动端应改用 click 事件切换 zoomed 类并动态调整缩放倍数。

直接用 transform: scale() 配合 transition 就能实现平滑放大，但多数人卡在鼠标移入区域判断不准、缩放中心偏移、或图片被父容器裁切——这些不是 CSS 写得不够多，而是没控制好触发上下文和盒模型边界。

为什么 :hover 放大后图片会“跳”或只放大左上角

默认情况下，transform: scale(1.2) 是以元素左上角为原点缩放的。图片本身没设 transform-origin，浏览器就按 box 的默认原点（0% 0%）算，看起来像突然向右下“弹出”。

• 加 transform-origin: center; 强制以中心为缩放基点
• 确保图片父容器有明确宽高，且 overflow: hidden; 防止放大后溢出撕裂布局
• 避免对 <img> 直接设 display: block; 后忽略行内元素默认 baseline 对齐，导致底部留白影响定位

如何让放大过渡不闪、不卡顿

缩放动画卡顿，90% 是因为浏览器没开启硬件加速或触发了重排。单纯写 transition: transform 0.3s ease; 不够。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 必须给图片加 will-change: transform;（仅在 hover 前触发，非始终开启）
• 优先用 transform 和 opacity 这类可合成属性，别用 width/height 或 left/top
• 如果父容器用了 flex 或 grid，检查是否因 align-items: stretch 导致图片高度被拉伸，干扰缩放比例

响应式场景下放大失效怎么办

在移动端或视口缩放后，scale(1.2) 可能超出屏幕，或 hover 在触屏设备上不触发——这不是 bug，是交互模式切换问题。

• 用 @media (hover: hover) and (pointer: fine) 包裹 hover 样式，排除触屏设备误应用
• 对移动设备改用 tap 逻辑：监听 click 并切换一个 .zoomed 类，靠 JS 控制 class 开关更可控
• 缩放倍数别写死，比如用 scale(calc(1 + 0.2 * min(1, 100vw / 800))) 动态降级，小屏只放大 1.1 倍

真正难的不是写出那三行 CSS，而是想清楚：你是在放大图片本身，还是在放大它在布局中的“视觉权重”；用户要的是细节查看，还是情绪引导。前者需要精准的 transform-origin 和容器约束，后者可能加个模糊背景+轻微位移更有效。别一上来就堆 transition。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！