快捷導(dǎo)航

使用JavaScript實現(xiàn)等比縮放的幾種常見方法

更新時間：2025年01月26日 10:00:07 作者：阿珊和她的貓

這篇文章主要介紹了如何使用JavaScript對HTML中的元素和任意DOM元素進(jìn)行等比縮放,通過獲取容器或元素的尺寸信息,計算縮放比例,并應(yīng)用CSS變換（transform屬性）來實現(xiàn)等比縮放,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、對HTML中的<img>元素進(jìn)行等比縮放

（一）基于容器尺寸的等比縮放

思路與原理首先獲取圖片元素以及它所在的容器元素的相關(guān)尺寸信息，然后計算出圖片相對于容器的縮放比例，按照這個比例對圖片的寬度和高度同時進(jìn)行縮放，從而保證圖片在容器內(nèi)等比縮放，不會出現(xiàn)變形的情況。
代碼示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>圖片等比縮放示例</title>
    <style>
        /* 定義圖片容器的樣式，這里設(shè)置一個固定寬度和高度的容器 */
      .image-container {
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            margin: 20px auto;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="image-container">
        <img id="myImage" src="your_image.jpg" alt="示例圖片">
    </div>
    <script>
        window.onload = function () {
            const img = document.getElementById('myImage');
            const container = document.querySelector('.image-container');
            const containerWidth = container.clientWidth;
            const containerHeight = container.clientHeight;
            const imgWidth = img.clientWidth;
            const imgHeight = img.clientHeight;
            // 計算寬度縮放比例和高度縮放比例
            const widthRatio = containerWidth / imgWidth;
            const heightRatio = containerHeight / imgHeight;
            // 取較小的比例，確保圖片完整顯示在容器內(nèi)且等比縮放
            const scaleRatio = Math.min(widthRatio, heightRatio);
            img.style.width = imgWidth * scaleRatio + 'px';
            img.style.height = imgHeight * scaleRatio + 'px';
        };
    </script>
</body>

</html>

（二）按指定的寬度或高度進(jìn)行等比縮放

思路與原理獲取圖片的原始寬度和高度，根據(jù)給定的目標(biāo)寬度或者目標(biāo)高度，計算出對應(yīng)的縮放比例，再依據(jù)這個比例來確定另一個維度的尺寸，實現(xiàn)圖片整體的等比縮放。
代碼示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>圖片等比縮放示例</title>
</head>

<body>
    <img id="myImage" src="your_image.jpg" alt="示例圖片">
    <button onclick="resizeImageByWidth(200)">按寬度200px等比縮放</button>
    <button onclick="resizeImageByHeight(200)">按高度200px等比縮放</button>
    <script>
        function resizeImageByWidth(targetWidth) {
            const img = document.getElementById('myImage');
            const imgWidth = img.clientWidth;
            const imgHeight = img.clientHeight;
            const ratio = targetWidth / imgWidth;
            img.style.width = targetWidth + 'px';
            img.style.height = imgHeight * ratio + 'px';
        }

        function resizeImageByHeight(targetHeight) {
            const img = document.getElementById('myImage');
            const imgWidth = img.clientWidth;
            const imgHeight = img.clientHeight;
            const ratio = targetHeight / imgHeight;
            img.style.width = imgWidth * ratio + 'px';
            img.style.height = targetHeight + 'px';
        }
    </script>
</body>

</html>

二、對任意DOM元素進(jìn)行等比縮放

（一）使用CSS變換（transform屬性）實現(xiàn)等比縮放

思路與原理通過獲取DOM元素的原始尺寸，然后根據(jù)期望的縮放比例，利用CSS的transform屬性中的scale()函數(shù)來對元素進(jìn)行縮放操作。scale()函數(shù)接受一個或兩個參數(shù)，當(dāng)只傳入一個參數(shù)時，會對元素進(jìn)行等比縮放，該參數(shù)就是縮放的倍數(shù)。
代碼示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DOM元素等比縮放示例</title>
    <style>
        /* 定義一個需要縮放的元素樣式 */
      .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 20px auto;
            transition: transform 0.3s ease;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button onclick="scaleElement(0.5)">縮小到50%</button>
    <button onclick="scaleElement(1.5)">放大到150%</button>
    <script>
        function scaleElement(scaleFactor) {
            const element = document.querySelector('.box');
            element.style.transform = `scale(${scaleFactor})`;
        }
    </script>
</body>

</html>

（二）基于鼠標(biāo)交互實現(xiàn)可拖動等比縮放（更復(fù)雜一些的示例）

思路與原理結(jié)合鼠標(biāo)的按下、移動和抬起事件，以及元素的位置和尺寸信息，在鼠標(biāo)拖動過程中實時計算縮放比例，通過更新元素的樣式（同樣可以使用transform屬性）來實現(xiàn)等比縮放效果。需要考慮鼠標(biāo)的相對位置、元素的初始尺寸等多方面因素來準(zhǔn)確計算縮放情況。
代碼示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>可拖動等比縮放示例</title>
    <style>
       .resizeable-box {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            cursor: pointer;
            margin: 20px auto;
        }

       .resize-handle {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
            cursor: se-resize;
        }
    </style>
</head>

<body>
    <div class="resizeable-box">
        <div class="resize-handle"></div>
    </div>
    <script>
        const box = document.querySelector('.resizeable-box');
        const handle = document.querySelector('.resize-handle');

        let startX, startY;
        let initialWidth, initialHeight;

        handle.addEventListener('mousedown', function (e) {
            startX = e.clientX;
            startY = e.clientY;
            initialWidth = box.clientWidth;
            initialHeight = box.clientHeight;
            document.addEventListener('mousemove', handleMove);
            document.addEventListener('mouseup', handleUp);
        });

        function handleMove(e) {
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            const newWidth = initialWidth + dx;
            const newHeight = initialHeight + dy;
            const scaleX = newWidth / initialWidth;
            const scaleY = newHeight / initialHeight;
            const scaleFactor = Math.min(scaleX, scaleY);
            box.style.transform = `scale(${scaleFactor})`;
        }

        function handleUp() {
            document.removeEventListener('mousemove', handleMove);
            document.removeEventListener('mouseup', handleUp);
        }
    </script>
</body>

</html>

以上這些JavaScript實現(xiàn)等比縮放的方法，可以根據(jù)具體的需求和應(yīng)用場景，靈活地應(yīng)用到網(wǎng)頁開發(fā)中，實現(xiàn)諸如圖片展示、元素動態(tài)縮放等效果。