当鼠标放置在图片上时，图片逐渐变大，图片的width和height 值逐渐变大，left值与top 值没有改变。

当鼠标悬停在图片上时，图片逐渐变大通常是通过CSS或者JavaScript实现的。这种效果可以通过CSS的`:hover`伪类和`transition`属性来完成，也可以使用JavaScript来动态地改变图片的样式。

使用CSS实现这一效果的基本方法如下：

img {
  transition: all 0.5s ease; /* 过渡效果 */
}

img:hover {
  transform: scale(1.2); /* 鼠标悬停时放大图片 */
}

在上面的CSS代码中，`transition`属性定义了图片尺寸变化时的过渡效果，`transform: scale(1.2)`则将图片放大到原始尺寸的1.2倍。这里的`scale`函数只改变了图片的尺寸，没有改变其位置，因此`left`和`top`值不会改变。

使用JavaScript实现这一效果可以更动态一些，如下示例：

var img = document.querySelector('img');
img.addEventListener('mouseover', function() {
  this.style.width = parseInt(this.style.width, 10) * 1.2 + 'px'; // 放大图片宽度
  this.style.height = parseInt(this.style.height, 10) * 1.2 + 'px'; // 放大图片高度
});

img.addEventListener('mouseout', function() {
  this.style.width = this.getAttribute('data-width'); // 恢复原始宽度
  this.style.height = this.getAttribute('data-height'); // 恢复原始高度
});

在上面的JavaScript代码中，当鼠标悬停在图片上时，通过监听`mouseover`事件来改变图片的`width`和`height`值。当鼠标移出图片时，通过监听`mouseout`事件来将图片的尺寸恢复到初始状态。