CSS如何实现鼠标悬浮放大图片_使用transform scale效果

根本原因是transform: scale()默认以左上角为原点缩放，导致布局塌陷和溢出；需加display: block、overflow: hidden、transform-origin: center，并仅过渡transform和opacity。hover时图片突然跳动或布局塌陷根本原因是transform: scale()默认以元素左上角为原点缩放，图片放大后会挤占周围空间，导致其他元素重排。更隐蔽的问题是：如果父容器没设overflow: hidden，放大的部分会溢出并可能遮挡相邻内容。给图片加display: block，消除行内元素默认的基线对齐留白父容器必须设overflow: hidden，裁掉超出部分用transform-origin: center让缩放以中心为基准，视觉更自然避免在img上直接写width/height，改用max-width: 100%保持响应式CSS transition卡顿或不触发常见于直接对transform加transition: all .3s——浏览器无法硬件加速所有属性，且all会让无关变化（比如color）也参与过渡，拖慢性能。只过渡transform和opacity这两个能触发GPU加速的属性：transition: transform .3s ease, opacity .3s ease确保图片有明确的width和height（哪怕用aspect-ratio），否则缩放起始尺寸不稳定不要在:hover里同时改width/height和transform，这会强制重排+重绘移动端hover失效或误触手机没有“悬浮”概念，:hover在iOS/Android上要么不触发，要么点一下才激活、再点一下才取消，体验断裂。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。