根据媒体查询更改 SVG 大小

Question

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

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

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

这行不通。

Answer 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
}
}

Answer 2

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

Answer 3

看起来你有一个错别字：缺少结束"}"。 此外，如果您想使用它们，您应该始终声明 px。良好做法。

Answer 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 viewBox，它与视口(您的浏览器窗口(完全不同。您可以使用以下命令定义 SVG 视口的位置和尺寸

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

您可能正在寻找 SVG2 中提出的 CSS 属性。 该提案在此 PR 中： 建议：将 SVG Viewbox 提升为 CSS 属性，扩展到所有可转换元素 #7.祝您编码愉快！