调整背景图像的大小以适合容器

Question

我想拉伸背景图像(可能没有容器那么大的SVG(，以拉伸或收缩到容器宽度的100%和容器高度的100%。

如果我们有一个比容器窄的背景图像：

background-image: url("../img/sky-gradients-01.svg");
background-repeat: no-repeat;

我想要类似的东西

object-fit: fill

一个CSS规则，它"拉伸图像以适应内容框，无论其纵横比如何。">

我试过：

/* stretches to fit the width, but maintains the aspect ratio, clipping the bottom */
background-size: 100%;
/* fits the height, but maintains the aspect ratio, leaving space at the both sides */
background-size: 100% 100%;
/* fits the height, but maintains the aspect ratio, leaving space at one sides */
background-size: contain;
/* stretches to fit the width, but maintains the aspect ratio, clipping the bottom */
background-size: cover;
/* original image size, space at sides and possibly bottom */
background-size: auto;

在所有情况下，所有背景选项都保持纵横比。有没有适合不考虑长宽比的选项？

Answer 1

如果其他方法都不起作用，请尝试使用图像编辑器使图像更为矩形。