实现鼠标悬停使图片缩小后显示图片整体

实现鼠标悬停时图片缩小并展示整个图片效果，通常涉及到HTML、CSS和JavaScript的结合。以下是简单的步骤：

1. HTML结构：首先，创建一个包含图片的`<img>`标签，并为其添加一个`data-full-size`属性来存储原始图片尺寸。

<img src="small-image.jpg" data-full-size="original-width-height" alt="图片描述">

2. CSS样式：设置初始状态下的图片大小和隐藏完整尺寸的图片。

img {
  width: initial;
  transition: transform 0.5s ease;
}

/* 鼠标离开时恢复原状 */
img:hover {
  cursor: pointer;
}

3. JavaScript/jQuery (可选)：当鼠标悬停时，改变图片大小并显示完整尺寸，鼠标移开则还原。

// 如果使用纯JS
const img = document.querySelector('img');
img.addEventListener('mouseover', function() {
  this.style.width = '100%';
});

img.addEventListener('mouseout', function() {
  this.style.width = `calc(100% - 20px)`;
  // 可能还需要调整高度比例
});

// 或者使用jQuery
$('img').hover(function() {
  $(this).width('100%');
}, function() {
  $(this).width('calc(100% - 20px)');
});

这个例子假设你在悬停时只希望宽度减小20像素来保持一定的缩放比例。你可以根据实际需求调整代码细节。请注意，为了兼容性和性能，最好将过渡效果和缩放计算放在CSS中，减少JavaScript操作DOM元素的次数。