"# [CSS] 使用 CSS 制作鼠标经过图片时，放大图片 1.5 倍
要实现鼠标经过图片时放大图片的效果，可以使用 CSS 的 transform 属性和 transition 属性来完成。
/* 鼠标经过图片时，放大图片 */
.image-container {
width: 200px; /* 图片容器的宽度 */
height: auto; /* 图片容器的高度根据图片自适应 */
overflow: hidden; /* 隐藏超出容器大小的部分 */
position: relative; /* 设置为相对定位，用于设置鼠标悬浮效果 */
}
.image-container img {
width: 100%; /* 图片宽度为容器宽度 */
height: auto; /* 图片高度根据宽度自适应 */
transition: transform 0.3s ease; /* 添加过渡效果 */
}
.image-container:hover img {
transform: scale(1.5); /* 鼠标悬浮时放大图片 */
}
上面的代码中，我们首先创建一个图片容器 .image-container，设置它的宽度为 200px，高度自适应，并且隐藏超出容器大小的部分。然后，在容器内部放置一个 <img> 标签，让图片的宽度为容器的宽度，高度根据宽度自适应。
接着，我们为图片设置过渡效果，当鼠标悬浮在容器上时，图片会放大 1.5 倍。这是通过给图片添加 :hover 伪类选择器来实现的，当鼠标悬浮在容器上时，选中的是图片元素，然后使用 transform 属性的 scale() 方法来实现放大效果。
以上就是使用 CSS 制作鼠标经过图片时放大图片 1.5 倍的代码。你可以将上述代码添加到你的 CSS 文件中，然后在 HTML 中使用 .image-container 类包裹你想要实现放大效果的图片即可。
请注意，该方法只是通过放大图片的显示效果来实现，实际上并没有改变图片的尺寸。如果你需要实际改变图片的尺寸，可以使用 JavaScript 或者服务器端处理图片的方法。
希望以上内容能帮助到你！"
