缩放没有宽高比的SVG图像

Question

Is it possible to fit the svg image to its full size without maintaining the aspect ratio? In the below example,

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

The svg image is centered adding some transparent spaces along its sides. If I increase the size of the image, the svg image increases proportionally but does not take the entire space, instead the transparent space increases in size. Is there a way to allow the svg image to occupy the entire space?

Thanks and Regards,

Neha

Answer 1

I solved the same problem with help of this article . The important part for you would be:

In order to prevent the uniform scaling of our SVG graphic we need to add the preserveAspectRatio attribute with the value of "none".

So open your SVG file in text editor and add attribute preserveAspectRatio="none" to <svg> tag. Like:

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

Answer 2

Is it possible to fit the svg image to its full size without maintaining the aspect ratio?

Yes, If you set required height and width , it should do resize. Unless you need aspect ratio, you can leave one of the parameters to auto .

I could not reproduce your issue. You might be resizing the content div instead of img . I've attached a sample snippet, can you reproduce the issue in this below snippet?

Here, I've set the width & height property in-line & in CSS to do the resize.

 .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"/>