缩放没有纵横比的 SVG 图像答案

【问题标题】：Scale SVG image without aspect ratio缩放没有纵横比的 SVG 图像
【发布时间】：2019-01-10 01:07:12
【问题描述】：

是否可以在不保持纵横比的情况下将 svg 图像调整为完整尺寸？在下面的例子中，

<img style="position: absolute; top: 12px; left: 31px; z-index: 1; width: 196px; height: 265px; " src="/media/images/logo.svg" />

svg 图像居中，在其两侧添加了一些透明空间。如果我增加图像的大小，svg 图像会按比例增加，但不会占用整个空间，而是透明空间的大小会增加。有没有办法让svg图片占据整个空间？

感谢和问候，

内哈

【问题讨论】：

标签： html css svg

【解决方案1】：

我在this article 的帮助下解决了同样的问题。对你来说重要的部分是：

为了防止 SVG 图形的统一缩放，我们需要添加值为“none”的 preserveAspectRatio 属性。

所以在文本编辑器中打开您的 SVG 文件并将属性 preserveAspectRatio="none" 添加到 <svg> 标签。喜欢：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">

【讨论】：

【解决方案2】：

是否可以将 svg 图像调整为完整尺寸而不保持纵横比？

是的，如果您设置了必需的height 和width，它应该会调整大小。除非您需要纵横比，否则您可以将其中一个参数留给auto。

我无法重现您的问题。您可能正在调整内容 div 而不是 img 的大小。我附上了一个示例 sn-p，你能在下面的 sn-p 中重现这个问题吗？

在这里，我设置了 width 和 height 属性内联和 CSS 来调整大小。

.modified{
  height:100px;
  width:200px;
}

<img width="500px" height="300px" src="http://placeholder.pics/svg/150x250/DEDEDE/000000"/>

<img class="modified" src="http://placeholder.pics/svg/150x250/DEDEDE/000000"/>

【讨论】：