根據媒體查詢更改svg大小

Question

<svg width='1175' height='400'> 

如何通過媒體查詢更改svg img的寬度和高度？

@media only screen and (min-width: 1680px) { 
    svg{ 
     width:1720; 
     height:400; 
     } 
} 

這是行不通的。

Answer 1

它看起來像你有一個錯字：錯過關閉「}」。 如果你想使用它們，你也應該總是聲明px。良好的做法。

Answer 2

首選您的svg上的viewbox attribute，而不是width和height。這樣你可以很容易地調整你的SVG的大小，保持正確的比例。

Answer 3

您可以通過如下媒體查詢更改寬度和高度，但將SVG包裝爲div or viewbox並根據您的頁面使其響應始終是理想選擇。

@media only screen and (min-width: 1680px) { 
svg{ 
    width:1720px; //or any css units 
    height:400px; //or any css units 
} 
}