使用外部 css 在响应断点中更改 svg 的比例

Question

我只想知道如何使用 css 更改 svg 大小。我需要做的是这个。我有多个 svg 文件。因此，对于不同的屏幕尺寸，我需要显示不同的 svg 文件。但是当我试图增加那个 svgs 的比例时，那根本不会发生。

    <body>
        <div class="top-left-img">
        </div>
        <div class="bottom-right-img">
        </div>
    </body>

    @media only screen and (max-width:375px){
    
    }
    @media only screen and (min-width:375px){
    
    }
    @media only screen and (min-width:1440px){
       .top-left-img{
           background-image:url("/images/bg-pattern-top-desktop.svg");
           background-repeat:no-repeat;
           width:400px;
    }

这些是我的代码行供您参考。

Answer 1

这应该有效：

.top-left-img {
    background-image:url("/images/bg-pattern-top-desktop.svg");
    background-repeat:no-repeat;
    background-size: cover;
    width:400px;
    height: auto;
}

使用外部 css 在响应断点中更改 svg 的比例

Change the scale of a svg in responsive breakpoint using external css

html

css

svg

responsive