缩放没有宽高比的SVG图像

Question

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

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

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

谢谢和问候，

NEHA

Answer 1

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

  

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

因此，在文本编辑器中打开SVG文件，并将属性 preserveAspectRatio =“ none” 添加到<svg>标记中。喜欢：

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

Answer 2

  

是否可以在不使用的情况下将svg图像调整为完整尺寸   保持宽高比？

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

我无法重现您的问题。您可能正在调整内容div而不是img。我附上了一个示例代码段，您可以在下面的代码段中重现这个问题吗？

在这里，我设置了width＆amp; height财产在线＆amp;在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"/>