使用CSS的transform: scale配合transition可实现图片悬停平滑放大。1. 设置.image-container固定尺寸和overflow:hidden避免布局偏移；2. 为img设置width:100%、height:100%及object-fit:cover确保填充容器，并添加transition:transform 0.3s ease实现过渡动画；3. 在img:hover中定义transform:scale(1.1)触发110%放大效果；4. 可自定义transition时长、缓动函数如cubic-bezier(.25,.8,.25,1)优化动画表现；5. 通过transform-origin调整缩放基点，默认以中心放大，可改为top center等位置。整个过程无需JavaScript，性能优良且易于实现。
想让图片在鼠标悬停时平滑放大，用 CSS 的 transform: scale 搭配 transition 是最简单有效的方法。关键在于设置过渡属性，控制缩放的动画效果。
1. 基础结构：准备图片容器
给图片或其父容器设置基本样式，包括固定尺寸和溢出隐藏（可选），这样缩放时不会影响页面布局。
.image-container {
width: 300px;
height: 200px;
overflow: hidden; /* 隐藏超出部分 */
border: 2px solid #ddd;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease; /* 核心：添加过渡 */
}
2. 添加悬停缩放效果
使用 :hover 伪类触发 transform: scale()，实现放大。
img:hover {
transform: scale(1.1); /* 放大到 110% */
}
鼠标移上图片，会以默认中心点平滑放大；移开后自动恢复原样。
立即学习“前端免费学习笔记（深入）”；
3. 自定义过渡细节
你可以调整 transition 的参数来改变动画表现：
-
持续时间：如
0.5s让动画更慢 -
缓动函数：用
ease-in-out或cubic-bezier(.25,.8,.25,1)控制速度变化 -
指定属性：只对
transform生效，避免其他属性也产生动画
img {
transition: transform 0.5s cubic-bezier(.25,.8,.25,1);
}
4. 调整缩放中心点（可选）
默认以图片中心缩放，可用 transform-origin 修改锚点：
img {
transform-origin: top center; /* 从顶部中心开始放大 */
}
基本上就这些。只要掌握 transition 监听 transform 变化，就能做出流畅的图片缩放动画，不依赖 JavaScript，性能也好。
