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

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;
在所有情况下，所有背景选项均保持宽高比。有没有适合的选项而不遵守宽高比？

我想拉伸背景图像（可能不如容器大的SVG），以拉伸或缩小至其容器宽度的100％和其高度的100％。如果我们有...

Answer 1

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