CSS中可以使用transform屬性來實現(xiàn)圖片的拖動調整大小，以下是一個簡單的示例代碼：

HTML部分：

<div class="container">
    <img id="myImage" src="path/to/image.jpg" />
    <div class="image-handle"></div>
</div>

CSS部分：

#myImage {
    position: relative;
    transform: scale(1); /* 初始大小 */
    transition: transform 0.2s; /* 過渡效果 */
}
.container {
    position: relative;
}
.image-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: move; /* 鼠標樣式 */
}

JavaScript部分：

var myImage = document.getElementById('myImage');
var container = document.querySelector('.container');
var handle = document.querySelector('.image-handle');
var initialSize = myImage.style.transform.match(/\d+/);
var scale = initialSize ? initialSize[0] : 1;
var position = myImage.getBoundingClientRect();
var offsetX = position.left;
var offsetY = position.top;
var drag = false;
var timer;
var step = 0.05; /* 每次調整的大小 */
var maxScale = 2; /* ***大可調整大小 */
var minScale = 0.5; /* ***小可調整大小 */
var adjustSize = function() { /* 調整圖片大小 */
    if (drag) {
        myImage.style.transform = 'scale(' + (scale + step) + ')';
        if (scale + step > maxScale) { /* 達到***大可調整大小 */
            step = -step; /* 反向調整 */
        } else if (scale + step < minScale) { /* 達到***小可調整大小 */
            step = -step; /* 反向調整 */
        } else { /* 在可接受范圍內 */
            step *= 0.95; /* 逐步減小調整幅度 */
        }
    } else { /* 未拖動時，保持初始大小 */
        myImage.style.transform = 'scale(' + initialSize + ')';
    }
};
var startDrag = function(e) { /* 開始拖動時 */
    if (!timer) { /* 防止重復拖動 */
        timer = true; /* 開始計時器 */
        drag = true; /* 開始拖動 */
        e.preventDefault(); /* 防止默認拖動行為 */
        e.target.style.cursor = 'grabbing'; /* 鼠標樣式 */
    } else { /* 如果正在拖動，則重置計時器并重新計算位置 */
        timer = false; /* 重置計時器 */
        position = myImage.getBoundingClientRect(); /* 重新計算位置 */
        offsetX = position.left; /* 更新偏移量 */
        offsetY = position.top; /* 更新偏移量 */
    }
};
var endDrag = function(e) { /* 停止拖動時 */
    if (timer) { /* 如果正在拖動，則重置計時器并更新鼠標樣式 */
        timer = false; /* 重置計時器 */
        e.target.style.cursor = 'grab'; /* 更新鼠標樣式 */
    } else { /* 如果未拖動，則保持初始大小并重置計時器 */
        initialSize = myImage.style.transform.match(/\d+/); /* 更新初始大小 */
        myImage.style.transform = 'scale(' + initialSize + ')'; /* 恢復初始大小 */
        timer = true; /* 重置計時器并防止重復拖動 */
    }
};
var moveImage = function(e) { /* 移動圖片時 */
    if (drag) { /* 如果正在拖動，則更新圖片位置并重新計算偏移量 */
        myImage.style.left = (e.pageX - offsetX) + 'px'; /* 更新圖片位置 */
        myImage.style.top = (e.pageY - offsetY) + 'px'; /* 更新圖片位置 */
        position = myImage.getBoundingClientRect(); /* 重新計算位置 */
        offsetX = position.left; /* 更新偏移量 */
        offsetY = position.top; /* 更新偏移量 */
    } else { /* 如果未拖動，則保持初始位置不變 */
        myImage.style.left = position.left + 'px'; /* 保持初始位置不變 */
        myImage.style.top = position.top + 'px'; /* 保持初始位置不變 */
    }
};
container