根据媒体查询更改svg大小

Question

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

如何使用媒体查询更改svg img的宽度和高度？

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

这不起作用。

Answer 1

首选您的svg上的viewbox attribute，而不是width和height。通过这种方式，您可以轻松调整svg的大小，保持正确的比例。

Answer 2

您可以使用以下媒体查询更改宽度和高度，但它始终是将SVG包装到div or viewbox并根据您的页面使其响应的理想选择。

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

Answer 3

看起来你有一个错字：缺少关闭＆＃34;}＆＃34;。 如果你想使用它们，你也应该总是声明px。好的做法。