调整背景SVG的大小

Question

我想在背景图像中使用来调整本地svg的大小，但设置width = 100％和height = 100％无效。 我什至将svg图片的尺寸调整为1425像素x 835像素

我的CSS代码：-

#main-page #products-section {
text-align: center;
background-image: url('/assets/images/product_background_img.svg');
background-size: 100% 100%;
background-repeat: no-repeat;
}

使用background-image: url('/assets/images/product_background_img.png');

时

输出为：

.png图片效果很好，但是我想通过svg文件实现相同的效果。由于png图片的文件较大，因此会使我的网页沉重。

Answer 1

您可以尝试使用height: 100vh和width: 100vw代替height: 100%和width: 100%。

Answer 2

尝试

background-size: auto|length|cover|contain|initial|inherit;