Chrome - stretch background image without keeping ratio

Question

I have the following code:

.container {
  width: 1rem;
  height: 2rem;
  background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
  background-size: 100% 100%;
  border: 1px solid black;
}

<div class="container"></div>

I expect the background image of the div to be stretched to the full width and height of said div.

Firefox behaves as expected:

the arrow is nicely stretched to the full width and height of the container, distorting the original image's aspect ratio

But Chrome appears to have a bug that makes it interpret background-size differently:

enter image description here

You can see the live result in this fiddle

Re-creating the background image would not be a solution, as the div in question is of variable height.

Is there a work-around for this Chrome bug?

possible duplicate of [Resize svg image as background in chrome browser](http://stackoverflow.com/questions/17491654/resize-svg-image-as-background-in-chrome-browser) — Brewal, Jul 22 '15 at 08:00
As a side note, a triangle could be [easily made](https://css-tricks.com/snippets/css/css-triangle/) with pure css. — Brewal, Jul 22 '15 at 08:04
Also a duplicate of: http://stackoverflow.com/questions/9334095/background-size100-100-doesnt-work-properly-in-chrome — Pikamander2, Jul 22 '15 at 08:05
@Brewal I know about the triangle-css trick, but in some browsers it's not anti-aliased and doesn't look perfect — Kuba Orlik, Jul 22 '15 at 08:22
Yes, it turns out to be a duplicate question. I think that [this solution](http://stackoverflow.com/a/17492515/1467284) looks most elegant — Kuba Orlik, Jul 22 '15 at 08:26
For what I can remember, you can rotate it 360° to prevent aliasing in most cases — Brewal, Jul 22 '15 at 08:27

score 5 · Answer 1 · answered Jan 19 '18 at 16:14

5

Maybe someone will find this post and not find the right answer. I found out that in my case, i had to add an attribute to my svg File:

<svg preserveAspectRatio="none" ...

answered Jan 19 '18 at 16:14

Rory

852
7
12

2

I think this should be the right answer. SVG behaves differently. Note that if the `viewBox` attribute is not provided, then `preserveAspectRatio` is ignored. – malthe Sep 22 '18 at 11:47

score 2 · Answer 2 · answered Jul 22 '15 at 08:16

Well, maybe not the best solution, but at least it works fine for me in Chrome. But you have to set the height (transform-scale) of the inner div with JQuery, according to your browser on load. Not really nice, but it works. Also watch out for the -webkit-background-size.

As you can see, a lot of problems.

HTML:

<div class="container"><div id="picture"></div></div>

CSS:

.container{
    width:1rem;
    height:2rem;
    border:1px solid black;
}
#picture {
    width: 100%;
    height: 100%;
    background-image: 
    url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
    -webkit-background-size: 100%;
    -webkit-transform: scale(1,2);
}

http://jsfiddle.net/y0j5tejw/3/

score 0 · Answer 3 · answered Jul 22 '15 at 08:34

0

Try this css for your code, it will definitely resolve your query.

.container{

    background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
    background-size: 100% 100%;
    border:1px solid black;
    float: left;
background-repeat: no-repeat;
    width: 5%;
height: 30px;
}

answered Jul 22 '15 at 08:34

Jaffer Wilson

7,029
10
62
139

Let me know if it help you. I have edited only some part of your code.ok – Jaffer Wilson Jul 22 '15 at 08:35
@KubaOrlik what is the problem now.. please let me know and It is working properly .. – Jaffer Wilson Jul 22 '15 at 09:35

Chrome - stretch background image without keeping ratio

3 Answers3