用css transform: scale() 配合 :hover 可实现无js图片放大，但需设 transform-origin: center 防偏移，加 image-rendering 提升清晰度，用 cubic-bezier 优化缓动，并注意响应式与高dpr适配。
直接用 CSS 的 transform: scale() 配合 :hover 就能实现，不需要 JS，也不用额外库——但缩放中心、过渡生硬、图片失真这三处最容易翻车。
为什么图片放大后会偏移或切掉？
默认缩放原点是左上角（transform-origin: 0 0），图片一放大，右下部分就直接冲出容器。必须显式设回中心点：
img {
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.2);
transform-origin: center; /* 关键！不加这行，放大像被拽走 */
}
- 如果父容器没设
overflow: hidden，放大会撑破布局 -
transform-origin也支持像素值（如50px 30px），适合非对称裁剪图 - 用
center center比只写center更稳妥（兼容老浏览器）
hover 放大后边缘模糊或锯齿？
这是浏览器对缩放图像的插值策略导致的，尤其在 Chrome 和 Safari 下明显。加这两行能强制启用更清晰的重采样：
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
-
-webkit-optimize-contrast在 Safari/Chrome 里效果最稳 -
crisp-edges强制最近邻插值，适合像素风或线条图；但照片类可能显得生硬，按需取舍 - Firefox 目前对这两个属性支持有限，可加
image-rendering: -moz-crisp-edges兜底
怎么让放大过程更自然、不突兀？
光靠 ease 不够，真正影响体感的是缓动函数和触发时机：
- 把
transition拆成transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)，比默认ease更有“弹力感” - 避免给
<img>直接设宽高（如width: 200px），优先用max-width: 100%+ 父容器约束，否则缩放时可能拉伸变形 - 如果图片加载慢，hover 瞬间放大会闪一下，建议提前用
will-change: transform提示浏览器优化（仅对频繁交互的图启用）
真正难调的不是代码本身，而是不同尺寸图在不同 DPR 屏幕下的渲染一致性——比如 2x 图在 1.5x 缩放屏上，scale(1.2) 可能刚好卡在亚像素边界，边缘发虚。这时候得配合 backface-visibility: hidden 或微调 transform: scale(1.201) 来绕过渲染器的亚像素舍入逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
