直接用 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。
