根据媒体查询更改 svg 大小答案

【问题标题】：change svg size according to media query根据媒体查询更改 svg 大小
【发布时间】：2021-09-20 15:34:22
【问题描述】：

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

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

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

这不起作用。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您似乎有一个错字：缺少结束“}”。如果你想使用它们，你也应该总是声明 px 。很好的做法。

【讨论】：

【解决方案4】：

更改 SVG 大小相对而言是一项更容易的任务。参考如下：

@media only screen and (min-width: 1680px) {
  svg {
    width:1720px; //as a rule of thumb, always give px,%,vw units etc.
    height:400px;
   }
}

或者，我们可以使用 SVG 视图框，它与视口（您的浏览器窗口）完全不同。您可以使用

定义 SVG 视口的位置和尺寸

<svg viewBox="0 0 250 250"></svg>

您可能正在寻找 SVG2 中提出的 CSS 属性。该提案在此 PR 中： Proposal: Promote SVG Viewbox to a CSS property, extend to all transformable elements #7。快乐编码！

【讨论】：