如何在CSS中正确缩放精灵字符？解决缩放后间距异常问题

这个问题我之前也碰到过！核心原因是transform: scale()的特性：它只改变元素的视觉显示大小，不会修改元素在页面布局中占据的空间尺寸。换句话说，虽然字母看起来变小了，但它们在页面里占的位置还是缩放前的宽度，这就导致了字母之间出现不该有的间距。

下面给你两个可行的解决方案，推荐第一种，精准度更高：

方案1：按缩放比例同步调整元素尺寸与背景属性（推荐） #

既然要缩放，我们可以直接把元素的宽度、背景位置、背景尺寸都按缩放比例同步调整，让元素的布局占位和视觉大小一致。这样既能保证精灵图显示正确，又能彻底解决间距问题。

如果想更灵活，还可以用CSS变量来统一管理缩放比例，方便后续调整。修改后的代码如下：

<html>
<body>
<div style="width: 114px; height: 63px;">
  <div class="letter letter-a"></div>
  <div class="letter letter-d"></div>
</div>
<div style="width: 114px; height: 63px;">
  <div class="letter letter-a larger"></div>
  <div class="letter letter-d larger"></div>
</div>
<style type="text/css">
.letter { 
  border: 1px solid red; 
  height: 100%; 
  margin: auto 0; 
  background-image: url(https://ibb.co/gJpYXkW); 
  background-size: auto 153%; 
  display: inline-block; /* 统一移到父类，避免重复定义 */
}
.letter-a { 
  width: 59px; 
  background-position: left -12px top -18px; 
}
.letter-d { 
  width: 51px; 
  background-position: left -187px top -18px; 
}

/* 用CSS变量管理缩放比例，后续改比例只需修改这里 */
.larger {
  --scale: 0.5;
  clear: both;
  margin-top: 30px;
  /* 同步调整元素宽度，让布局占位和视觉大小匹配 */
  width: calc(var(--scale) * 100%);
  /* 按比例调整背景位置，保证精灵图显示正确 */
  background-position: calc(var(--scale) * -12px) calc(var(--scale) * -18px);
  /* 同步调整背景尺寸 */
  background-size: auto calc(var(--scale) * 153%);
}
/* 给D字母单独适配背景位置 */
.larger.letter-d {
  background-position: calc(var(--scale) * -187px) calc(var(--scale) * -18px);
}
</style>
</body>
</html>

方案2：利用transform-origin和负边距抵消占位空间 #

如果不想修改元素的基础尺寸，可以通过设置transform-origin让元素从左侧开始缩放，再用负边距抵消原来的占位宽度。不过这种方法需要手动计算边距，灵活性稍差：

.larger {
  clear: both;
  margin-top: 30px;
  transform: scale(0.5);
  transform-origin: left center; /* 从左侧居中缩放，避免视觉偏移 */
  /* 负边距抵消原宽度的一半（对应缩放比例0.5） */
  margin-right: calc(-0.5 * 100%);
}

这种方法在复杂布局下可能出现兼容性问题，所以还是优先推荐方案1。

内容的提问来源于stack exchange，提问作者Bruno Leveque