css - 调整背景 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%.