如何实现图片左右旋转后可完全滚动的图片查看器

核心问题是：transform作用在img元素上时，容器无法感知到图片旋转后的实际占用尺寸（比如90度旋转后宽高互换），导致滚动范围计算错误。以下是简洁的修复方案：

步骤1：调整CSS布局 #

修改.image-wrapper和#viewer的样式，让容器能正确感知图片变换后的尺寸：

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

.image-container {
    overflow: scroll;
    width: 80%;
    max-height: 80vh;
    position: relative;
    border: 1px solid #ddd;
}

/* 移除flex居中，让wrapper自适应内容尺寸 */
.image-wrapper {
    display: inline-block;
    transition: transform 0.5s ease;
    transform-origin: center center;
}

/* 恢复图片自然尺寸，去掉object-fit限制 */
#viewer {
    max-width: 100%;
    height: auto;
}

.controls {
    margin-top: 10px;
}

button {
    margin-right: 10px;
}

步骤2：简化JS逻辑 #

将变换操作转移到.image-wrapper上，移除不必要的translate，只保留缩放和旋转：

let currentZoom = 1;
let currentRotation = 0;
const wrapper = document.querySelector('.image-wrapper');

function zoomIn() {
  currentZoom += 0.1;
  updateTransform();
}

function zoomOut() {
  currentZoom = Math.max(0.1, currentZoom - 0.1); // 防止缩放过小导致图片消失
  updateTransform();
}

function rotateClockwise() {
  currentRotation += 90;
  updateTransform();
}

function rotateAntiClockwise() {
  currentRotation -= 90;
  updateTransform();
}

function updateTransform() {
  wrapper.style.transform = `scale(${currentZoom}) rotate(${currentRotation}deg)`;
}

修复原理 #

1. 变换对象转移：把transform从img移到.image-wrapper，容器能准确计算wrapper变换后的宽高（比如旋转90度后，wrapper的宽高会自动切换为图片的高和宽），滚动条的范围也会随之更新。
2. 移除手动偏移：之前的translate是手动调整图片位置，现在让容器滚动条控制查看位置，逻辑更简洁自然。
3. 图片尺寸自适应：img设置max-width:100%和height:auto，保证初始状态下适配容器，缩放时自然变化尺寸。

内容的提问来源于stack exchange，提问作者Gokul Vasan