背景大小百分比是如何计算的？

Question

我有一个正在使用的精灵，我想重用精灵中的一个图像，但大小只有一半，所以我想如果我只使用background-size:50%;，它会将背景大小调整 50%，但它由于某种原因，尺寸似乎缩小了四分之一：

.test {
  background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
  width: 112px;
  height: 112px;
  border: 1px solid red;
}

.test.half-size {
  width: 56px;
  height: 56px;
  background-size: 50%;
}

<div class="test"></div>
<div class="test half-size"></div>

现在我可以通过将背景大小设置为 113% 来解决此问题：

.test {
  background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
  width: 112px;
  height: 112px;
  border: 1px solid red;
}

.test.half-size {
  width: 56px;
  height: 56px;
  background-size: 113%;
}

<div class="test"></div>
<div class="test half-size"></div>

但是为什么图片小于原图时background-size大于100%？

在确定如何调整精灵大小时，我可以应用一组计算吗？

Answer 1

根据W3C Specs：

百分比是相对于背景定位区域。

并且background positioning area 是基于background-origin 属性的border-box 或padding-box 或content-box 之一。在这里，您没有为此明确指定任何值，因此使用其默认值 padding-box。这个元素没有填充，所以它等于content-box。

---

您的图像是 126 x 112 像素，但元素的宽度和高度是 56 x 56 像素，因此background-size: 100%（推断为100% auto）意味着图像被缩小到宽度为 56 像素.现在要到达56px，宽度缩小了图像原始大小的 44.44%。因此，为了保持纵横比（因为一个值是自动），图像的 高度 是 >也缩小了到 44.44%，也就是 49.78px（或50px 大约）。如您所见，计算出的背景图像的尺寸为 56px x 50px（而不是 56px x 56px），因此它不会完全覆盖框。您可以在下面的 sn-p 中清楚地看到这一点。

.test {
  background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
  width: 56px;
  height: 56px;
  border: 1px solid red;
  background-size: 56px 50px; /* see how this is same as 100% or 100% auto */
}

.test.t2 {
  width: 56px;
  height: 56px;
  background-size: 100%;
}

.test.t3 {
  width: 56px;
  height: 56px;
  background-size: 100% auto;
}

<div class="test"></div>
<div class="test t2"></div>
<div class="test t3"></div>

注意：56px 的宽度包括圆圈右侧的空格，因此即使它覆盖了元素的整个宽度，您仍然会看到差距。这是因为图片本身有空格。

---

现在当你设置background-size: 50%（=50% auto）时，这意味着图像的最大宽度可以是28px，因此它被缩小了22.22%。这意味着高度也缩小了 22.22%，也就是大约25px。这就是您将其视为几乎四分之一大小（但不完全是四分之一）的原因。这可以在下面的 sn-p 中再次直观地看到：

.test {
  background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
  width: 56px;
  height: 56px;
  border: 1px solid red;
  background-size: 28px 25px; /* again see how they are same */
}

.test.t2 {
  width: 56px;
  height: 56px;
  background-size: 50%;
}

.test.t3 {
  width: 56px;
  height: 56px;
  background-size: 50% auto;
}

<div class="test"></div>
<div class="test t2"></div>
<div class="test t3"></div>

---

当我们设置background-size: 113%时，这意味着宽度可以最大为容器宽度的113%，也就是63.28px，这大概是原始图像宽度的 50%。由于宽度从原始图像缩小了50%，它的高度也缩小了相同的量，因此结果值为56px（这没什么但是元素的高度，因此它垂直覆盖了盒子）。现在，由于您还将background-position 指定为left-top，因此图像相对于容器的左边缘放置，因此图像右侧的空白区域（另一个@ 987654348@) 是不可见的，因为框不会显示超出其宽度的任何内容。

你已经回答了你问题的第二部分，所以我不再赘述。

---

对于未来的读者：对于 OP 的情况，可能无法摆脱空白，因为它是精灵的一部分，但如果您的情况不同，您可以摆脱那么空间是最好的。

如果右侧的空白被删除并且图像被裁剪为实际大小（即 112 x 112px），那么只需设置background-size: 100% 100%（甚至100% auto）就足够了。当容器元素的尺寸设置为原始尺寸的一半或四分之一（或其他）时，将自动为我们进行缩放。

.test {
  background: url(https://i.stack.imgur.com/UaCct.png) left top no-repeat;
  width: 112px;
  height: 112px;
  background-size: 100% 100%;
  border: 1px solid red;
}

.test.half-size {
  width: 56px;
  height: 56px;
}

.test.quarter-size {
  width: 28px;
  height: 28px;
}

<div class="test"></div>
<div class="test half-size"></div>
<div class="test quarter-size"></div>

Answer 2

在玩了很多精灵之后，我得出的结论是，它是完整精灵的宽度除以精灵部分的宽度，再乘以 100 将为您提供 x 轴背景大小百分比，然后执行与 y 轴背景尺寸的高度相同。

所以在我的情况下，要获得 x 百分比，它是

(         126px         /         112px        ) * 100 = 112.5% 
  Full width of sprite     width of sprite part

并得到它的y百分比

(         112px         /         112px        ) * 100 = 100% 
 Full height of sprite     height of sprite part

这意味着background-size: 112.5% 100% 将适用于具有该精灵的任何方形 div：

.test {
  background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
  width: 112px;
  height: 112px;
  background-size: 112.5% 100%;
  border: 1px solid red;
}

.test.half-size {
  width: 56px;
  height: 56px;
}
.test.random-size {
  width: 90px;
  height: 90px;
}

<div class="test"></div>
<div class="test half-size"></div>
<div class="test random-size"></div>