通过CSS的transform和transition实现图片悬停平滑放大，首先设置图片默认样式并添加过渡效果，再利用:hover伪类改变scale值，配合overflow:hidden和object-fit:cover优化布局与显示。
想让图片在鼠标悬停时平滑放大，可以用 CSS 的 transform 配合 transition 实现。这种方法性能好、代码简洁，还能控制动画速度和缩放比例。
基本原理
通过设置元素的 transform: scale() 改变其大小，再用 transition 添加过渡效果，就能实现悬停时的平滑放大。实现步骤
1. 给图片设置默认样式，包括初始缩放为1，以及 transition 属性定义动画效果。
2. 使用 :hover 伪类，在鼠标悬停时改变 transform 的 scale 值。
3. 可选：设置 overflow: hidden 或容器限制，防止放大后溢出布局。
立即学习“前端免费学习笔记（深入）”；
示例代码
以下是一个简单实用的例子：
<style>
.img-container {
display: inline-block;
overflow: hidden;
}
.img-container img {
width: 200px;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.img-container:hover img {
transform: scale(1.2);
}
</style>
<div class="img-container">
<img src="your-image.jpg" alt="示例图片">
</div>关键点说明
- transition: transform 0.3s ease; 控制缩放动画的时间和缓动效果。
- scale(1.2) 表示放大到原始尺寸的 120%，可根据需要调整数值（如 1.5 就是 150%）。
- 给图片父容器设置 overflow: hidden，可隐藏放大后超出的部分，视觉更整洁。
- 使用 object-fit: cover 保证图片在容器内保持比例填充，避免拉伸变形。
基本上就这些，不复杂但容易忽略细节。只要记得加 transition 和 hover 状态，再合理控制容器范围，就能做出自然流畅的悬停放大效果。
