在网页开发中，实现图片在容器内的拖动、缩放并保持纵横比是一个常见需求，JavaScript 能够很好地解决这一问题。

HTML 结构方面，需要一个容器元素来包裹图片。例如：

<div id="image-container">
    <img id="draggable-image" src="your-image-url.jpg" alt="Draggable Image">
</div>

这里 image-container 是容器，draggable-image 是要操作的图片。

接下来是 CSS 样式，要设置容器的大小和定位属性，让图片在其中进行操作。

#image-container {
    width: 500px;
    height: 500px;
    position: relative;
    overflow: hidden;
}
#draggable-image {
    position: absolute;
    top: 0;
    left: 0;
}

然后是核心的 JavaScript 代码部分。我们要实现拖动功能，需要监听 mousedown、mousemove 和 mouseup 事件。

const image = document.getElementById('draggable-image');
let isDragging = false;
let startX, startY;
image.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX - image.offsetLeft;
    startY = e.clientY - image.offsetTop;
});
document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        let newX = e.clientX - startX;
        let newY = e.clientY - startY;
        const containerWidth = image.parentNode.clientWidth;
        const containerHeight = image.parentNode.clientHeight;
        const imageWidth = image.naturalWidth;
        const imageHeight = image.naturalHeight;
        if (newX < 0) newX = 0;
        if (newY < 0) newY = 0;
        if (newX + imageWidth > containerWidth) newX = containerWidth - imageWidth;
        if (newY + imageHeight > containerHeight) newY = containerHeight - imageHeight;
        image.style.left = newX + 'px';
        image.style.top = newY + 'px';
    }
});
document.addEventListener('mouseup', () => {
    isDragging = false;
});

对于缩放功能，我们可以通过监听鼠标滚轮事件来实现。并且在缩放过程中要保持纵横比。

image.addEventListener('wheel', (e) => {
    e.preventDefault();
    const zoomFactor = e.deltaY > 0? 0.9 : 1.1;
    const containerWidth = image.parentNode.clientWidth;
    const containerHeight = image.parentNode.clientHeight;
    let newWidth = image.offsetWidth * zoomFactor;
    let newHeight = image.offsetHeight * zoomFactor;
    if (newWidth > containerWidth) {
        newHeight = newWidth * (image.naturalHeight / image.naturalWidth);
        if (newHeight > containerHeight) {
            newWidth = containerWidth;
            newHeight = containerHeight;
        }
    } else if (newHeight > containerHeight) {
        newWidth = newHeight * (image.naturalWidth / image.naturalHeight);
    }
    image.style.width = newWidth + 'px';
    image.style.height = newHeight + 'px';
});

通过以上代码，我们就能轻松实现图片在容器内的拖动、缩放并保持纵横比，为用户带来更好的交互体验。