Sprite frame作为div背景时，div旋转后自动缩放错误问题求解

算力阿峰

2026-10-12

问题原因

核心错误点：getBoundingClientRect()返回的是元素经过所有CSS变换后的外接包围盒尺寸，当元素添加旋转效果后，外接包围盒的宽高会远大于元素本身的布局宽高，导致缩放系数计算错误。
额外错误点：原代码中已经计算了缩放后的背景坐标bgX、bgY，但实际赋值backgroundPosition时使用了未缩放的原始坐标，会导致背景位置偏移。

解决方案

最简单的修复方式是将获取元素尺寸的逻辑替换为不受transform影响的offsetWidth和offsetHeight，同时修正背景位置的赋值，修改后的JS代码如下：

const $img = document.querySelector('.img');

const firstFrameWidth = 185;
const firstFrameHeight = 155;
const firstFrameX = 0;
const firstFrameY = -10;

const spriteWidth = 626;
const spriteHeight = 348;

function resize() {
  // offsetWidth/offsetHeight返回元素布局尺寸，不受transform变换影响
  const elementWidth = $img.offsetWidth;
  const elementHeight = $img.offsetHeight;

  const scaleX = elementWidth / firstFrameWidth;
  const scaleY = elementHeight / firstFrameHeight;
  const bgWidth = spriteWidth * scaleX;
  const bgHeight = spriteHeight * scaleY;
  const bgX = firstFrameX * scaleX;
  const bgY = firstFrameY * scaleY;

  $img.style.backgroundSize = `${bgWidth}px ${bgHeight}px`;
  // 使用缩放后的背景坐标
  $img.style.backgroundPosition = `${bgX}px ${bgY}px`;
}

window.addEventListener('resize', resize);
resize();

$img.style.transform = 'rotate(45deg)';