Home Web Front-end JS Tutorial How to implement dragging and zooming of images in JavaScript while being limited to the container and maintaining the aspect ratio?

How to implement dragging and zooming of images in JavaScript while being limited to the container and maintaining the aspect ratio?

Oct 18, 2023 am 11:28 AM
Zoom aspect ratio Picture drag Container limits

JavaScript 如何实现图片的拖动缩放同时限制在容器内且保持纵横比?

JavaScript How to implement dragging and scaling of images while being limited to the container and maintaining the aspect ratio?

In many web designs, we may need to implement the drag and zoom functions of images within the container. Moreover, in order to maintain the aspect ratio of the image, we need to do some additional processing. This article will introduce in detail how to use JavaScript to implement this function and provide specific code examples.

First, we create a structure in HTML that contains images and containers. An example is as follows:

1

2

3

<div id="container">

  <img src="image.jpg" id="image">

</div>

Copy after login

Next, we need to use CSS to style the container. An example is as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

#container {

  width: 500px;

  height: 400px;

  border: 1px solid #ccc;

  position: relative;

  overflow: hidden;

}

 

#image {

  position: absolute;

  width: 100%;

  height: 100%;

  object-fit: contain;

  cursor: move;

}

Copy after login

In CSS, we set the size and border style of the container, and set its position to relative. The image, on the other hand, uses absolute positioning and sets its size to 100% to fill the container. object-fit: contain;Used to maintain the aspect ratio of the image.

Now, we can start writing JavaScript code to implement dragging and zooming functions. We will use mouse events to control the position and size of the image. An example is as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

var container = document.getElementById('container');

var image = document.getElementById('image');

 

var isDragging = false;

var startX, startY, startWidth, startHeight;

 

// 鼠标按下事件

image.addEventListener('mousedown', function(e) {

  isDragging = true;

  startX = e.clientX;

  startY = e.clientY;

  startWidth = image.offsetWidth;

  startHeight = image.offsetHeight;

});

 

// 鼠标移动事件

container.addEventListener('mousemove', function(e) {

  if (isDragging) {

    var offsetX = e.clientX - startX;

    var offsetY = e.clientY - startY;

 

    var newWidth = startWidth + offsetX;

    var newHeight = startHeight + offsetY;

 

    // 限制图片在容器内部移动和缩放

    if (newWidth >= container.offsetWidth && newWidth <= container.offsetWidth * 2) {

      image.style.width = newWidth + 'px';

    }

    if (newHeight >= container.offsetHeight && newHeight <= container.offsetHeight * 2) {

      image.style.height = newHeight + 'px';

    }

  }

});

 

// 鼠标松开事件

container.addEventListener('mouseup', function() {

  isDragging = false;

});

Copy after login

In the above code, we use the mousedown event to identify the moment when the mouse is pressed, and record the initial position and size. Next, we listen to the mousemove event to update the position and size of the image in real time. During the movement, we calculate the offset of the mouse and change the size of the image based on the offset. Finally, we use the mouseup event to identify the moment the mouse is released and stop the dragging operation.

It should be noted that during the process of moving and scaling, we limit the size of the image by determining whether the new width and height are within a certain range of the container. This ensures that the image is always within the container and maintains the aspect ratio.

To sum up, through the above JavaScript code, we can realize the dragging and zooming function of the image in the container, and maintain the aspect ratio of the image. This is very practical in many web designs.

Of course, the above is just a simple example, you can adjust and optimize it according to your own needs. Hope this article is helpful to you!

The above is the detailed content of How to implement dragging and zooming of images in JavaScript while being limited to the container and maintaining the aspect ratio?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Display scaling guide on Windows 11 Display scaling guide on Windows 11 Sep 19, 2023 pm 06:45 PM

We all have different preferences when it comes to display scaling on Windows 11. Some people like big icons, some like small icons. However, we all agree that having the right scaling is important. Poor font scaling or over-scaling of images can be a real productivity killer when working, so you need to know how to customize it to get the most out of your system's capabilities. Advantages of Custom Zoom: This is a useful feature for people who have difficulty reading text on the screen. It helps you see more on the screen at one time. You can create custom extension profiles that apply only to certain monitors and applications. Can help improve the performance of low-end hardware. It gives you more control over what's on your screen. How to use Windows 11

Safari zoom issue on iPhone: Here's the fix Safari zoom issue on iPhone: Here's the fix Apr 20, 2024 am 08:08 AM

If you don't have control over the zoom level in Safari, getting things done can be tricky. So if Safari looks zoomed out, that might be a problem for you. Here are a few ways you can fix this minor zoom issue in Safari. 1. Cursor magnification: Select "Display" > "Cursor magnification" in the Safari menu bar. This will make the cursor more visible on the screen, making it easier to control. 2. Move the mouse: This may sound simple, but sometimes just moving the mouse to another location on the screen may automatically return it to normal size. 3. Use Keyboard Shortcuts Fix 1 – Reset Zoom Level You can control the zoom level directly from the Safari browser. Step 1 – When you are in Safari

How to zoom pages side by side in word How to zoom pages side by side in word Mar 19, 2024 pm 07:19 PM

When we use word documents to edit files, sometimes there are many pages. We want to display them side by side and check the overall effect. However, because we don’t know how to operate, we often need to scroll for a long time to view page by page. I don’t know if you have ever encountered a similar situation. In fact, we can easily solve it at this time as long as we learn how to set the word zoom pages side by side. Below, let’s take a look and learn together. First, we create and open a new page in the Word document, and then enter some simple content to make it easier to distinguish. 2. For example, if we want to realize word zoom and side-by-side display, we need to find [View] in the menu bar, and then select [Multiple Pages] in the view tool options, as shown in the figure below: 3. Find [Multiple Pages] and click,

Word document editing tips: Make two pages of content into one Word document editing tips: Make two pages of content into one Mar 25, 2024 pm 06:06 PM

In Microsoft Word documents, you often encounter the situation of merging two pages of content into one page, especially when you need to save paper or when you need to print a double-sided document. Several common methods to achieve this goal will be introduced below. Method 1: Adjust the page margins. First open the Word document and find the &quot;Page Layout&quot; option in the menu bar. After clicking, the page layout settings menu will pop up. Here you can adjust the page margins, including the top, bottom, left, and right margins. Generally speaking, making the top and bottom margins smaller will allow the content to fit within one page. you can taste

How to enlarge or reduce the entire excel table How to enlarge or reduce the entire excel table Mar 20, 2024 pm 05:16 PM

The development of computer technology, network technology, and software technology has provided great prospects for office automation. Our current office operation processes can all be carried out electronically, which greatly saves operation time. Excel tables are commonly used software operations. Sometimes based on paper or typesetting problems, we need to enlarge or reduce the entire excel table. Settings, if there are any operation methods that can meet our needs, let’s take a look at the following course. 1. First open the excel software and enter relevant information, as shown in the figure below. 2. Then click the icon in the lower right corner and move it left or right. The plus sign can zoom in and the minus sign can zoom out, as shown in the figure below. 3. The second method can also use ctrl + mouse wheel.

How to scale and rotate images using Python How to scale and rotate images using Python Aug 17, 2023 pm 10:52 PM

How to use Python to scale and rotate images Introduction: Today, we often use images to enrich our web design, mobile applications, social media and other scenarios. In image processing, scaling and rotation are two common requirements. Python, as a scripting language and powerful image processing tool, provides many libraries and methods to handle these tasks. This article will introduce how to use Python to scale and rotate images, and provide code examples. 1. Zooming pictures Zooming pictures is one of the basic operations of adjusting image size.

How to use JavaScript to drag and zoom images while limiting them to the container? How to use JavaScript to drag and zoom images while limiting them to the container? Oct 20, 2023 pm 04:19 PM

How does JavaScript implement dragging and zooming of images while limiting them to the container? In web development, we often encounter the need to drag and zoom images. This article will introduce how to use JavaScript to implement dragging and zooming of images and limit operations within the container. 1. Drag the picture To drag the picture, we can use mouse events to track the mouse position and move the picture position accordingly. The following is a sample code: //Get the picture element varimage

How to use JavaScript to achieve the up and down sliding switching effect of images while adding zoom and fade animations? How to use JavaScript to achieve the up and down sliding switching effect of images while adding zoom and fade animations? Oct 20, 2023 pm 05:15 PM

How can JavaScript achieve the up and down sliding switching effect of images while adding zoom and fade animations? In web design, image switching effects are often used to improve user experience. Among these switching effects, sliding up and down, zooming and fading animations are relatively common and attractive. This article will introduce how to use JavaScript to achieve the combination of these three animation effects. First, we need to use HTML to build a basic web page structure that contains the image elements to be displayed. The following is an example

See all articles