Chrome image with enlarged background without preserving the 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>

Run codeHide result

I expect the background image to divbe stretched to full widthand heightspecified div.

Firefox works as expected:

But Chrome seems to have an error that allows it to be interpreted background-sizedifferently:

You can see the result in this script.

Re-creating the background image will not be a solution since the one in question divhas a variable height.

Is there a workaround for this Chrome error?

Answer 1

, , , , , Chrome. ( ) div JQuery, . , . -webkit-background-size.

, .

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/

Answer 2

, - . , svg:

<svg preserveAspectRatio="none" ... 

Answer 3

css , .

.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;
}