纯css hover放大用transform: scale()配合transition和overflow: hidden实现，需包裹容器设固定宽高并写:hover在容器上，避免直接作用于img；移动端默认不支持hover，建议用媒体查询限制生效范围。
用 CSS transform 实现 hover 放大，别用 JavaScript
纯 CSS 就能搞定，transform: scale() 是最轻量、兼容性好、性能高的方案。JavaScript 不仅没必要，还容易引发重排、卡顿，尤其在移动端。
关键点：放大时需配合 transition 控制动画时长，否则会突兀；同时要设 overflow: hidden 防止放大后溢出容器或破坏布局。
-
scale(1.2)表示放大到 120%，建议控制在 1.1–1.5 之间，过大易导致边缘裁切或抖动 - 必须给图片父容器（如
<div>）设固定宽高和 <code>overflow: hidden，否则放大会撑开布局 - 避免直接对
<img>标签加transform同时又设width: 100%—— 这会导致缩放中心偏移，应改用transform-origin: center
HTML 结构怎么写才不容易错
常见错误是把 hover 效果直接套在 <img> 上，结果鼠标一移入就触发，但移出时因父容器没包裹好，放大区域“悬空”，效果断断续续。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
正确结构是用一个带尺寸的容器包住图片，并把 :hover 写在容器上：
<div class="img-zoom"> @@##@@ </div>
-
class="img-zoom"必须设明确的width和height（比如200px），不能依赖图片原始尺寸 - 不要用
max-width: 100%或width: auto，否则overflow: hidden失效 - 如果图片本身尺寸小（如 50×50），放大后模糊，这不是代码问题，是素材分辨率不够
放大时图片模糊或锯齿怎么办
这是 transform: scale() 在部分浏览器（尤其是旧版 Safari 和 Chrome）上的渲染缺陷，本质是 GPU 加速采样策略导致的。
- 加
will-change: transform提前提示浏览器优化渲染，但慎用 —— 过多会增加内存开销 - 更稳妥的是补一句
-webkit-backface-visibility: hidden，强制启用硬件加速并减少重绘闪烁 - 若仍模糊，可尝试
image-rendering: -webkit-optimize-contrast（仅 WebKit 有效），但不推荐作为通用解法 - 真正根治方式：提供更高分辨率图片（如 2x 图），再用
background-image+background-size替代<img src="example.jpg" alt="示例图">，不过这就超出“简单悬停放大”范畴了
移动端 touch 设备要不要适配
默认情况下，:hover 在 iOS 和 Android 的大部分浏览器里只在模拟鼠标时生效（比如连了蓝牙鼠标），纯触屏点击不会触发 —— 这不是 bug，是规范行为。
- 如果必须支持触摸放大，得用 JavaScript 监听
touchstart/touchend，但注意：iOS Safari 的touchstart有 300ms 延迟，且scale()在 touch 下容易误触发 - 更实际的做法是放弃“悬停即放大”，改用点击展开大图（用 lightbox 类库），或者干脆不为触屏实现该效果 —— 用户体验优先级远低于桌面端
- 若坚持用 CSS，可加
@media (hover: hover) and (pointer: fine)媒体查询，只对支持 hover 的设备启用该样式，避免干扰移动设备
