Chrome image with enlarged background without preserving the ratio

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:

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

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

enter image description here

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?

+4
source share
3 answers

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

+2

, - . , svg:

<svg preserveAspectRatio="none" ... 
+2

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

Source: https://habr.com/ru/post/1599030/


All Articles