答案：通过CSS的transform和transition属性实现图片悬停缩放。设置transition控制缩放动画时长与效果，hover时应用scale放大图片，推荐使用父容器限制尺寸避免布局抖动，确保视觉流畅。
实现图片悬停缩放并带有平滑过渡效果，主要依靠 CSS 的 transform 和 transition 属性。下面介绍一个简单实用的方法。
基础结构
先准备一个基本的 HTML 图片元素：
CSS 设置初始状态和过渡效果
为图片设置默认样式，并定义过渡动画：
.hover-scale {transition: transform 0.3s ease;
width: 200px;
height: auto;
border-radius: 8px;
}
.hover-scale:hover {
transform: scale(1.1);
}
说明：
- transition: transform 0.3s ease 表示 transform 变化时，用 0.3 秒的缓动动画完成。
- scale(1.1) 表示放大到原始尺寸的 1.1 倍。
- 可根据需要调整 scale 值（如 1.2 更明显）或过渡时间。
可选优化：防止布局抖动
图片放大时可能影响周围内容，可通过以下方式避免：
立即学习“前端免费学习笔记（深入）”；
.hover-scale {
display: block;
max-width: 200px;
overflow: hidden;
margin: 0 auto;
}
或者用父容器限制：
.image-wrapper {overflow: hidden;
width: 200px;
height: 200px;
display: inline-block;
}
.image-wrapper img {
transition: transform 0.3s ease;
width: 100%;
height: auto;
}
.image-wrapper:hover img {
transform: scale(1.1);
}
这样能确保图片在固定区域内缩放，不引起页面跳动。
基本上就这些，不复杂但容易忽略细节。
