Scaling of SVG backgrounds

考虑到SVG图像的灵活性，将它们作为背景图像与background-image属性一起使用时需要记住很多事项，而且在使用background-size属性对其进行缩放时还需要记住更多内容。本文介绍如何在使用这些属性时处理SVG图像的缩放。

算法总结

该算法大部分可以归结为这四个规则。有些边缘案例不在这些规则的覆盖范围内，但是这涵盖了大部分案例。

1. 如果background-size指定一个固定的维度（即百分比和相对单位是通过它们的上下文来确定的），那么这个维度就会固定。

2. 如果图像具有内在比率（即，其宽高比例是恒定的，例如16：9,4：3,2.39：1,1：1等等），则渲染大小保持该比率。

3. 如果图像指定了大小，并且大小没有被约束或覆盖所修改，则指定的大小会被实现。

4. 如果以上所有情况都不符合，则图像将以与背景区域相同的尺寸呈现。

值得注意的是，尺寸算法只关心图像的尺寸和比例，或者缺少尺寸。具有固定尺寸的SVG图像将被视为相同尺寸的光栅图像。

源图像示例

在深入研究使用不同类型源图像的结果并查看它们在使用时的background-size外观之前，先看看几个具有不同尺寸和大小设置的示例源图像会很有帮助。

在每种情况下，我们都会展示源图像在150x150框中呈现的内容，并提供SVG源的链接。

无尺寸和无比例的

该图像既无尺寸又无比例。它并不关心它的大小，也不关心保持特定的宽高比。这将创建一个良好的渐变桌面背景，无论您的屏幕尺寸和纵横比如何，都可以工作。

SVG源

一个指定的尺寸和比例

此图像指定宽度为100像素，但没有高度或内在比率。基本上，这是一个可以在整个block的整个高度上拉伸的薄壁条。

SVG源

具有本征比的指定维数

此图像指定100像素的高度，但没有宽度。它也指定了3：4的内在长宽比。这确保了它的宽高比始终是3：4，除非有意缩放到不成比例的大小（即明确指定宽度和高度都不是该比率）。

这很像指定一个特定的宽度和高度，因为一旦你有一个维度和一个比例，另一个维度是隐含的，但它仍然是一个有用的例子。

SVG源

没有内在比例的宽度或高度

此图片不指定宽度或高度; 相反，它指定了1：1的固有比率。想想这个像一个程序图标。它始终是方形的，并且可以在任何尺寸下使用，例如32x32,128x128或512x512。

SVG源

标度实例

现在让我们看看一些例子，当我们对这些图像应用不同的缩放比例时会发生什么。在下面的每个例子中，包围矩形的宽度是300像素，高度是200像素。另外，background-repeat为了清晰起见，背景已经设定为不重复。

注：下面的截图显示了预期渲染。目前并非所有浏览器都正确呈现这些内容。

指定两个尺寸的固定长度

如果background-size用于指定两个尺寸的固定长度，则总是按照上述规则1使用这些长度。换句话说，无论源图像是否指定了其尺寸和/或宽高比，图像总是会拉伸到您指定的尺寸。

资料来源：无维度或内在比率。

鉴于这种CSS：

background: url(no-dimensions-or-ratio.svg);
background-size: 125px 175px;

呈现的输出如下所示：

资料来源：一个指定的维度，没有内在比率。

鉴于这种CSS：

background: url(100px-wide-no-height-or-ratio.svg);
background-size: 250px 150px;

呈现的输出如下所示：

资料来源：一个指定维数，内禀比率

鉴于这种CSS：

background: url(100px-height-3x4-ratio.svg);
background-size: 275px 125px;

呈现的输出如下所示：

资料来源：未指定宽度或高度与固有比率。

鉴于这种CSS：

background: url(no-dimensions-1x1-ratio.svg);
background-size: 250px 100px;

呈现的输出如下所示：

使用包含或覆盖

指定cover为background-size使图片尽可能小，同时覆盖整个背景区域。contain另一方面，使图像尽可能大，而不被背景区域裁剪。

对于具有内在比例的图像，只有一个尺寸与cover/ fit标准单独匹配。但是，如果没有指定固有比率，那么cover/ fit不够，所以大/小约束选择所得的大小。

资料来源：无维度或内在比率。

如果图像没有指定尺寸或固有比率，则不适用规则2和规则3，因此规则4将接管：背景图像呈现覆盖整个背景区域。这满足最大或最小的约束。

background: url(no-dimensions-or-ratio.svg);
background-size: contain;

呈现的输出如下所示：

资料来源：一个指定的维度，没有内在比率。

类似地，如果图像具有指定的一个维度但没有固有比率，则应用规则4，并且图像被缩放以覆盖整个背景区域。

background: url(100px-wide-no-height-or-ratio.svg);
background-size: contain;

呈现的输出如下所示：

资料来源：一个指定维数，内禀比率

当你指定一个内在的比例时，事物会改变 在这种情况下，规则1是不相关的，所以应用规则2：我们试图保留任何固有比率（同时尊重contain或cover）。例如，保留一个300x200盒子的3：4内在长宽比，contain意味着绘制一个150x200的背景。

含箱

background: url(100px-height-3x4-ratio.svg);
background-size: contain;

呈现的输出如下所示：

注意整个图像是如何渲染的，尽可能地将其嵌入到框中，而不会将其剪除。

盖壳

background: url(100px-height-3x4-ratio.svg);
background-size: cover;

呈现的输出如下所示：

在这里，03：4的比率被保留，同时仍然拉伸图像来填充整个盒子。这将导致图像的底部被剪裁掉。

资料来源：无内禀比维度。

当使用没有内在尺寸但有内在比率的图像时，事物的工作原理是相似的。

含箱

background: url(no-dimensions-1x1-ratio.svg);
background-size: contain;

呈现的输出如下所示：

注意，图像的大小是为了适应最小的尺寸，同时保持01：1的高宽比。

盖壳

background: url(no-dimensions-1x1-ratio.svg);
background-size: cover;

呈现的输出如下所示：

在这里，图像的大小使得它填充了最大的维度。01：1的高宽比已经被保留下来，尽管有了这个源图像，这是很难看到的。

两个尺寸使用“自动”自动调整尺寸

如果background-size设置为auto或auto auto，第2条规定，呈现必须保留%27s提供的任何内在比率。

资料来源：无维度或内在比率。

当源图像没有指定内在比率或维数时，规则4生效，并呈现图像以填充背景区域。

background: url(no-dimensions-or-ratio.svg);
background-size: auto auto;

呈现的输出如下所示：

资料来源：一维与无内在比率。

如果没有指定内部比率，但至少指定了一个维度，则规则3生效，我们将图像呈现为遵从这些维度。

background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto auto;

呈现的输出如下所示：

这里请注意，源SVG中指定的宽度为100像素，而高度填充背景区域，因为它没有被指定（明确地或通过内在比率）。

资料来源：一维和内在比率。

如果我们有一个固定维数的内在比率，那么这两个维度都是固定的。正如前面提到的，知道一维和比率与显式地指定两个维度是一样的。

background: url(100px-height-3x4-ratio.svg);
background-size: auto auto;

呈现的输出如下所示：

由于此图像具有显式的100像素高度，03：4的比率显式地将其宽度设置为75像素，因此在auto案子。

资料来源：无固定维数与固有比率。

如果指定了内部比率，但没有维度，则适用规则4---但规则2也适用。因此，图像的呈现方式与contain案子。

background: url(no-dimensions-1x1-ratio.svg);
background-size: auto auto;

呈现的输出如下所示：

使用“自动”和一个特定长度

给定规则1，总是使用指定的维度，所以我们只需要使用我们的规则来确定第二个维度。

资料来源：无维度或内在比率。

如果图像没有维度或内部比率，则应用规则4，我们使用背景区域%27s维来确定auto维数。

background: url(no-dimensions-or-ratio.svg);
background-size: auto 150px;

这里，宽度是根据规则4使用背景区域的宽度来确定的，而高度是CSS中指定的140px。

资料来源：一个指定的维度，没有内在比率。

如果图像有一个指定的维度，但没有内部比率，则如果该维度设置为“规则3”，auto在CSS中则按规则3使用该指定的维度。

background: url(100px-wide-no-height-or-ratio.svg);
background-size: 200px auto;

在这里，CSS中指定的200 px覆盖SVG中指定的100 px宽度，按照规则1。因为没有提供%27s的内在比率或高度，auto选择背景区域的高度作为呈现图像的高度。

background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto 125px;

在这种情况下，宽度在CSS中被指定为AUTO，因此选择SVG中指定的100 px宽度，根据规则3。CSS中的高度设置为125 px，因此根据规则1选择。

资料来源：一个指定维数，内禀比率

在指定维度时，规则1将该维度从SVG应用到渲染的背景，除非被CSS明确覆盖。如果还指定了固有比率，则用于确定其他维度。

background: url(100px-height-3x4-ratio.svg);
background-size: 150px auto;

在这种情况下，我们已经覆盖了CSS中图像的高度为150px，因此应用了规则1。内在的3：4纵横比然后决定auto案件的宽度。

资料来源：未指定内禀比的尺寸。

如果SVG中没有指定维度，则应用CSS中指定的维度，然后使用内在比率来选择另一个维度，每条规则2。

background: url(no-dimensions-1x1-ratio.svg);
background-size: 150px auto;

宽度由CSS设置为150 px。大auto高度的值是使用这个宽度和01：1的高宽比来计算的，也是150 px，从而得到上面的图像。