CODEWITHSUNDEEP
htmlcsssvg
Neha Dangui
Neha Dangui

Reputation: 647

Scale SVG image without aspect ratio

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

enter image description here

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

Upvotes: 12

Views: 13399

Answers (2)

Milan Švehla
Milan Švehla

Reputation: 635

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

Upvotes: 28

Prajwal
Prajwal

Reputation: 4000

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

Upvotes: 0

Related Questions