产品图片列表，想要展示的效果：鼠标划过图片，图片有缩放效果，但是图片大小不变。这一实现的效果采用css即可实现。

代码如下：

<style>
.product {
width: 200px; /* 设置初始宽度 */
height: 150px; /* 设置初始高度 */
position: relative; /* 确保子元素能够基于此容器进行定位 */
overflow: hidden; /* 限制内部内容超出容器区域不显示 */
border: 1px solid #ccc; /* 设置边框样式 */
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); /* 设置阴影样式 */
transition: transform 0.3s ease; /* 添加动画效果 */
overflow: hidden;
}
.product img {
display: block; /* 将img作为块级元素处理 */
max-width: 100%; /* 自动按比例缩放图片 */
max-height: 100%; /* 同上 */
object-fit: cover; /* 图片等比例缩放到完全覆盖容器 */
}
.product:hover img {
transform: scale(1.3); /* 鼠标悬停时缩放到1.2倍 */
}
</style>


<div class="product">
<img src="your_image_url" alt="Product Image"> <!-- 替换成真正的图片URL -->
</div>