向上滚动鼠标滚轮，放大图片；向下滚动鼠标滚轮，缩小图片。（别用jQuery）

这种交互效果通常在网页设计中通过JavaScript事件监听和CSS样式控制来实现。当你需要调整图像大小时，可以遵循以下步骤：

1. 首先，在HTML中添加一个`<img>`元素，并给它一个id，方便后续操作：

<img id="image" src="your-image-source.jpg" alt="Image">

2. 使用JavaScript添加滚动事件监听器到窗口对象，当用户滚动鼠标滚轮时触发：

window.addEventListener('wheel', handleScroll, { passive: true }); // 允许默认的滚动行为
function handleScroll(event) {

3. 在`handleScroll`函数中，获取当前滚轮偏移量（deltaY），并基于此调整图像的缩放比例：

const img = document.getElementById('image');
let scale = 1; // 初始缩放比例为1

if (event.deltaY > 0) { // 如果向上滚动
    scale += 0.1; // 缩小图片
} else if (event.deltaY < 0) { // 如果向下滚动
    scale -= 0.1; // 放大图片
}

// 更新图片的宽度和高度
img.style.transform = `scale(${scale})`;
}

4. 当然，为了防止图片尺寸过大导致显示异常，你可以在调整缩放比例时添加一些限制，比如设置最大和最小的缩放范围。

注意：上述示例假设浏览器支持`transform`属性的`scale()`方法。如果考虑到兼容性问题，你可能还需要检查浏览器是否支持并做相应处理。