Web画廊图片旋转时保持宽高比仍溢出的问题求助

问题背景 #

开发Web画廊，实现了按R键或点击按钮旋转图片的功能，但竖图旋转后出现溢出父容器、Y轴留白，调整计算方式又会导致图片变形的问题。

核心实现逻辑 #

图片加载时通过calculateNewDimensions函数计算尺寸，目标是让图片保持宽高比并填满父容器（函数中screenWidth/screenHeight实际为父容器尺寸）；旋转时通过element.style.transform修改角度，再调用该函数更新图片宽高。

尺寸计算核心函数 #

function calculateNewDimensions(
  imgWidth,
  imgHeight,
  screenWidth,
  screenHeight,
  rotation,
) {
  // Returning Variables
  let newWidth = null;
  let newHeight = null;
  // Given Data
  const oldAspectRatio = rotation === 90 || rotation === 270
    ? imgWidth / imgHeight
    : imgHeight / imgWidth;
  const rotatedAspectRatio = rotation === 90 || rotation === 270
    ? imgHeight / imgWidth
    : imgWidth / imgHeight;
  const screenAspectRatio = screenWidth / screenHeight;
  // Solution
  if (oldAspectRatio > 1) {
    console.log('Image was landscape before');
    // Image is wide
    if (screenAspectRatio > 1) {
      console.log('screen is wide');
      // Screen is wide
      if (rotation === 90 || rotation === 270) {
        newWidth = screenHeight;
        newHeight = screenHeight * rotatedAspectRatio;
      } else {
        newHeight = screenHeight;
        newWidth = screenHeight * rotatedAspectRatio;
      }
    } else {
      console.log('Screen is portrait');
      // Screen is Portrait
      /* Now comparing aspect Ratio to find best fit
       * Should the width fit or height
       */
      if (rotatedAspectRatio < screenAspectRatio) {
        console.log('new ratio is less wider than screen');
        // Image height greater than screen
        if (rotation === 90 || rotation === 270) {
          newWidth = screenHeight;
          newHeight = screenHeight * rotatedAspectRatio;
        } else {
          newHeight = screenHeight;
          newWidth = screenHeight * rotatedAspectRatio;
        }
      } else {
        console.log('new ratio is wider than screen\'s');
        // Image height less than screen
        if (rotation === 90 || rotation === 270) {
          newHeight = screenWidth;
          newWidth = screenWidth / rotatedAspectRatio;
        } else {
          newWidth = screenWidth;
          newHeight = screenWidth / rotatedAspectRatio;
        }
      }
    }
  } else {
    console.log('Image was potrait before');
    // Image was Portrait Before
    if (screenAspectRatio > 1) {
      console.log('parent is wide');
      // Screen is Wide
      /*
       * Now comparing aspect Ratio to find best fit
       * Should the width fit or height
       */
      if (rotatedAspectRatio > screenAspectRatio) {
        console.log('New Ratio is wider than screen');
        // New width is greater than screen's
        if (rotation === 0 || rotation === 180) {
          newWidth = screenWidth;
          newHeight = screenWidth / rotatedAspectRatio;
        } else {
          newWidth = screenHeight;
          newHeight = screenWidth / rotatedAspectRatio;
        }
      } else {
        console.log('New Ratio is less wider than parent');
        // New Height is greater than screen's
        if (rotation === 90 || rotation === 270) {
          newWidth = screenHeight;
          newHeight = screenHeight * rotatedAspectRatio;
        } else {
          console.log('Rotation is 0 or 180');
          newHeight = screenHeight;
          newWidth = screenHeight * rotatedAspectRatio;
        }
      }
    } else {
      console.log('Screen is portrait');
      // Screen is Portrait
      if (rotation === 90 || rotation === 270) {
        newHeight = screenWidth;
        newWidth = screenWidth * rotatedAspectRatio;
      } else {
        newWidth = screenWidth;
        newHeight = screenWidth / rotatedAspectRatio;
      }
    }
  }
  return { width: newWidth, height: newHeight };
}

问题现象 #

• 横图旋转后显示正常
• 竖图旋转后：
  • 按当前逻辑计算（父容器高度 × 旋转后宽高比）：图片溢出父容器，父容器Y轴存在空白
  • 改为除法计算：图片不再溢出，但比例严重失真

排查信息 #

• 控制台输出逻辑路径：Image was potrait before → parent is wide → New Ratio is less wider than parent，对应执行代码段：

console.log('New Ratio is less wider than parent');
// New Height is greater than screen's
if (rotation === 90 || rotation === 270) {
  newWidth = screenHeight;
  newHeight = screenHeight * rotatedAspectRatio;
} else {
  console.log('Rotation is 0 or 180');
  newHeight = screenHeight;
  newWidth = screenHeight * rotatedAspectRatio;
} 

• 图片CSS样式已排除干扰：

#active-image-wrapper > img {
    display: block;
    margin: auto;
    transform-origin: center;
    transition: all ease 0.2s;
    border: 2px solid red;
}

解决方案 #

1. 修正旋转后宽高比的计算逻辑 #

问题根源在于rotatedAspectRatio定义错误：旋转90/270度时图片宽高互换，需先明确旋转后的实际宽高，再计算宽高比，而非基于原图状态判断。

2. 简化适配逻辑，统一计算规则 #

无需区分原图是横/竖屏，只需对比旋转后的图片宽高比与父容器宽高比，决定按宽度还是高度适配：

function calculateNewDimensions(
  imgWidth,
  imgHeight,
  containerWidth,
  containerHeight,
  rotation,
) {
  // 确定旋转后的图片实际宽高
  const rotatedW = [90, 270].includes(rotation) ? imgHeight : imgWidth;
  const rotatedH = [90, 270].includes(rotation) ? imgWidth : imgHeight;
  const imgRatio = rotatedW / rotatedH;
  const containerRatio = containerWidth / containerHeight;

  let newW, newH;

  if (imgRatio > containerRatio) {
    // 图片更宽，按容器宽度适配
    newW = containerWidth;
    newH = containerWidth / imgRatio;
  } else {
    // 图片更高，按容器高度适配
    newH = containerHeight;
    newW = containerHeight * imgRatio;
  }

  return { width: newW, height: newH };
}

3. 父容器样式补全 #

旋转后图片的视觉位置会偏移，但元素占位尺寸不变，给父容器添加以下样式确保溢出部分隐藏且图片居中：

#active-image-wrapper {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

内容的提问来源于stack exchange，提问作者Zohaib Khan