Tips on enabling zooming for resizing an image and initially sizing it using vh/vw units

Question

Tips on enabling zooming for resizing an image and initially sizing it using vh/vw units

My issue involves having an extensive amount of code spread across various components (I'm using vue.js). Although I can't share all the code efficiently, I'll do my best to explain the situation clearly:

I have a div that contains an image. The width of this div is set in viewport width (vw) units to ensure it fits the browser's width without overflowing initially.

However, I want users to be able to zoom in on the image, causing it to overflow horizontally. My challenge lies in finding a way to enable zoom functionality while keeping the width formatting in vw units.

It is crucial for me to maintain the width in vw units because I intend for the picture, which is initially at 100% zoom, to resize and fit the browser's width when resized by the user.

Is there a method to set an image's width based on vw units yet still allow zooming capabilities?

html css vue.js

Answer 1

Answer №1

To maintain the div at 100vw continuously, you can set the initial width of the image to 100% and then adjust only the image's zoom level. This setup ensures that if the window is resized, the containing div will resize to fit the window width while maintaining the image's zoom level.

Below is a straightforward example that allows zooming by either clicking buttons or using methods like a mouse wheel:

<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>

Answer 2

To maintain the div at 100vw continuously, you can set the initial width of the image to 100% and then adjust only the image's zoom level. This setup ensures that if the window is resized, the containing div will resize to fit the window width while maintaining the image's zoom level.

Below is a straightforward example that allows zooming by either clicking buttons or using methods like a mouse wheel:

<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>

Tips on enabling zooming for resizing an image and initially sizing it using vh/vw units

Answer №1

Similar questions

The function "process" is not defined within the Vue.js framework

How to transform the bootstrap 4 hamburger icon into a three dots menu icon using css only

Tips for personalizing the color, font style, background color, and alignment of the WhatsApp share button I designed using HTML

No changes occur within this JavaScript code

How to turn off span text in AngularJS

Why is it possible to enter the invalid input `1-1` into an `<input type="number">` field in Chrome, but not `1-e`?

Retrieve the div element by calling a scriptlet with JavaScript

Creating a custom transition rule in Stylus: A step-by-step guide

Achieving a shadow effect above a CSS border: tips and tricks

Populate the form fields with the values from the database when editing

Using HTML to design interactive buttons that can send API requests and display their current status

The .fixed-top navbar in Bootstrap conceals various elements behind it

What is the reason behind the jQuery .after() method inserting a row that is cramming itself into one cell?

Vue and Mocha: No tests pass when a Vue single file contains a <style> tag

Having trouble iterating through an array of objects in Vue?

What is the best method to align subtitles in an HTML5 video player? Tips for enhancing the style of subtitles/captions

How to obtain the full path of a file downloaded using a Chrome extension

What are some ways to recycle HTML User Interface components?

struggling to incorporate API Json response data into my HTML file using AngularJS

Issues with JavaScript scripts functionality on my live server