如何允许通过放大调整图像大小，同时使用 vh/vw 单位设置其初始大小？答案

【问题标题】：How to allow an image to be resized by zooming in, while setting its initial size using vh/vw units?如何允许通过放大调整图像大小，同时使用 vh/vw 单位设置其初始大小？
【发布时间】：2021-01-04 18:57:27
【问题描述】：

我在不同组件中有太多代码（使用 vue.js 顺便说一句），无法找到一种有效的方式来发布所有内容，但我相信我可以清楚地描述这种情况：

我有一个包含图像的 div。调整 div 的大小，使其宽度基于视口宽度 (vw) 单位。这样我就可以使 div 适合浏览器的宽度，并且不会在 x 方向上溢出最初。

但是，我希望用户能够放大图像，从而使其在 x 方向上溢出。我的问题是我找不到一种方法来允许放大或缩小我的图像/它所在的 div，因为宽度设置为等于 vw 单位。

我需要以 vw 单位保持宽度格式，因为当有人调整浏览器大小时，我希望图片（最初以 100% 缩放）调整大小以适应浏览器的宽度。

有没有办法根据 vw 设置图像的宽度，但仍允许放大？

【问题讨论】：

你是如何实现缩放的——例如，用户是否点击了你提供的按钮，你想要缩放的只是那个 div？
由于图像位于宽度为 100vw 的 div 中，您可以让 img 最初的宽度为 100% 吗？我可能会误解您在调整窗口大小时想要做什么 - 是否有某种原因，img 无法保持其缩放，无论当时以 % 为单位的 div 宽度（始终为 100vw，因此将调整大小)。

标签： html css vue.js

【解决方案1】：

如果您始终将包含的 div 保持在 100vw，您可以以 100% 的宽度启动 img，然后仅缩放 img。如果窗口被调整大小，包含的 div 将调整大小以仍然填充窗口的宽度，并且 img 的缩放将调整大小以匹配。

这是一个简单的示例，它允许通过单击按钮或使用例如鼠标滚轮

<head>
<style>
#mydiv {
  width : 100vw;
}
#mydiv div.buttons {
  position:absolute;
  z-index:10;
}
</style>
<script>
function zoom() {//this function called from onwheel event on the image
  event.preventDefault();  
  if (event.deltaY<0) { zoomIn(); }
  else { zoomOut(); }
}

//this is the original code which scales on Zoom in and Zoom out buttons
function zoomIn() {
  var w=Number(myimg.style.width.replace('%',''));
  if ((w <= (maxsteps*step + 100))) {
    myimg.style.width=(w+step) + '%';
  }
}
function zoomOut() {
  var w=Number(myimg.style.width.replace('%',''));
  if (w > step) {
    myimg.style.width=(w-step) + '%';
  }
}
</script>
</head>
<body>
<div id="mydiv">
  <div class="buttons">
    <button onclick="zoomIn();">Zoom in</button>
    <button onclick="zoomOut();">Zoom out</button>
  </div>
    <img id="myimg" src="https://rgspaces.org.uk/wp-content/uploads/junction-arch-and-tricycle-and-box-1024x768.jpg" style="width:100%;"/>
</div>
<script>
const myimg = document.getElementById('myimg');
const step = 10;//or however many vw (=% of div width) you want the div to zoom on a click
const maxsteps = 10;//the maximum number of zoom steps you allow the user to take

myimg.addEventListener("wheel", zoom);

</script>
</body>

【讨论】：

谢谢你的例子。有没有办法在使用 ctrl+scrollwheel 来放大和缩小图像时使鼠标滚轮，也许使用一些 js？如果 vue 无法做到这一点，我肯定会采用这个示例，因为它可以完成工作！
是的，可以缩放滚轮以及（或代替）单击按钮。我已经在我的答案中编辑了代码 sn-p 来做这两个。它只需要 img 中的 onwheel= 并根据滚轮向前还是向后移动来决定是放大还是缩小。
由于某些浏览器（例如 Firefox、IE）不支持 onwheel 我已将代码更改为 img 上的 addEventListener('wheel'... 因为常见的桌面浏览器似乎支持。