纯css实现图片悬停放大最简单可靠：用:hover配合transform:scale()和transition，需设display:block防基线跳动、overflow:hidden防溢出、transform-origin:center确保居中缩放，移动端须用@media(hover:hover)隔离。
用 CSS :hover 配合 transform: scale() 最简单可靠
不需要 JS，纯 CSS 就能实现平滑、可控制的图片悬停放大。核心是监听鼠标移入状态，动态缩放图片容器或图片本身。
关键点在于：必须给图片或其父容器设置 overflow: hidden，否则放大会溢出布局；同时推荐用 transform 而非修改 width/height，前者触发 GPU 加速，动画更流畅。
示例代码：
@@##@@
.zoom-img {
width: 300px;
height: auto;
transition: transform 0.3s ease;
display: block;
}
.zoom-img:hover {
transform: scale(1.2);
}
-
transition必须写在非:hover状态下，否则首次悬停无动画 - 如果图片是内联元素（如没设
display: block），缩放可能引发文字基线跳动，加display: block或vertical-align: top可避免 - 放大倍数别超过
1.5，否则边缘锯齿明显，尤其在高 DPI 屏幕上
想限制放大区域只在图片内部？用 overflow: hidden 包一层
直接对 <img src="photo.jpg" class="zoom-img"> 应用 scale() 会把整个元素撑大，可能影响周围布局。更稳妥的做法是套一个固定尺寸的容器，裁剪超出部分。
示例结构：
<div class="img-container"> @@##@@ </div>
对应 CSS：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.img-container {
width: 300px;
height: 200px;
overflow: hidden;
border-radius: 4px;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.img-container:hover img {
transform: scale(1.15);
}
-
object-fit: cover确保图片填满容器且不拉伸变形 - 容器必须显式设宽高，否则
overflow: hidden无效 - 如果图片原始比例和容器差异大，
scale(1.15)可能导致关键内容被裁掉，建议配合transform-origin调整缩放中心（如transform-origin: center）
移动端 Safari 上悬停失效？不是 bug，是设计机制
iOS 和 iPadOS 的 Safari 默认不支持 :hover 伪类——因为没有“悬停”这个交互概念。用户第一次点击会触发一次 :hover，但之后不会持续响应。
真实场景中，如果你需要在移动设备上也提供类似反馈，有两条路：
- 放弃纯 CSS 方案，改用 JS 监听
touchstart/touchend切换 class（例如加is-active类） - 不强求“悬停”，改用点击展开大图（比如用
lightgallery或原生<dialog></dialog>） - 若仍想保留 CSS 方案，可加
@media (hover: hover)媒体查询做渐进增强，让移动端回退到静态尺寸
放大后模糊？检查 image-rendering 和像素比
Chrome 和 Firefox 在缩放图片时默认使用双线性插值，放大后容易发虚。Safari 更明显，尤其对 PNG 或小尺寸图。
可尝试强制启用更锐利的渲染方式：
.zoom-img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
-
pixelated在放大整数倍（如scale(2)）时最有效，适合像素风图 -
crisp-edges对抗锯齿较弱，但比默认值锐利 - 这些属性兼容性尚可，但
pixelated在旧版 Edge 中不支持 - 真正治本的方法是提供更高分辨率的源图（如 2x 尺寸），然后用
srcset适配
实际项目里，scale(1.1–1.3) + transition + 容器裁剪已经覆盖绝大多数需求。过度优化渲染模式反而可能在不同浏览器间表现不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
