html实现页面图片等比例放大缩小功能

HTML本身并不直接支持图片的动态等比例放大缩小功能，但是可以配合CSS和JavaScript来实现这一效果。常用的方法有以下几种：

1. **CSS`:** 使用CSS的`transform`属性结合`scale()`函数来改变图片大小，例如 `style="transform: scale(x, y)"`，其中x和y是你想要的比例缩放因子。

<img src="image.jpg" style="width: 100%; max-width: 400px; transform: scale(1)" onclick="this.style.transform = 'scale(1.5)'">

当用户点击图片时，会触发JavaScript事件并放大图片。

2. **JavaScript**: 可以使用`addEventListener`添加鼠标滚轮事件，或者创建自定义的交互控件如按钮来调整图片大小。

const img = document.querySelector('img');
img.addEventListener('wheel', function(event) {
  event.preventDefault(); // 阻止默认滚动行为
  const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); // 正向滚轮为正值
  this.style.transform = 'scale(' + (1 + delta * 0.1) + ')';
});

3. **JavaScript库**: 一些前端框架和库如jQuery、Vue.js或React.js提供更高级别的API来处理这种交互，比如响应式图片组件或者第三方插件，如Zoom.js、Fancybox等。

请注意，为了保持用户体验，通常在实际项目中，我们会在图片上添加视口缩放的限制，并优化图片加载策略，避免在缩放过程中造成性能问题。