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

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

如果没有其他效果，请尝试使用图像编辑器使图像更矩形。