Anders Lindén Anders Lindén - 2 months ago 17
CSS Question

Cannot stretch svg background image, aspect ratio will be preserved

I am using svg as background image and I want it to be stretched to 100% 100%.

However, it seems like both Chrome and firefox are doing their best to retain the aspect ratio of the svg and instead shrink it in the other width.

Normal size

div
{
background: url(image.svg) no-repeat;
background-size: 100% 100%;
width: 14rem;
height: 4rem;
}


Normal size

Double width

div
{
background: url(image.svg) no-repeat;
background-size: 100% 100%;
width: 28rem;
height: 4rem;
}


Double as wide

Double height

div
{
background: url(image.svg) no-repeat;
background-size: 100% 100%;
width: 14rem;
height: 8rem;
}


Double height

How can I instead have that svg stretched?

svg contents:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 371.7 102.8" enable-background="new 0 0 371.7 102.8" xml:space="preserve">
<polygon fill="#EF9104" points="370.4,100.5 0,100.5 0,0 269.4,0 "/>
</svg>

Answer

You should add

<svg preserveAspectRatio="none">

to your SVG.

MDN Reference Link

<none>

Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.

Comments