コンテナに限定され、アスペクト比を維持しながら、JavaScript で画像のドラッグとズームを実装するにはどうすればよいですか?

<div id="container">
  <img src="image.jpg" id="image">
</div>

#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;
}

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;
});