The background-size does not work, svg is displayed trimmed, trimmed as you like, but does not adjust to the parent block.

It should scale to its size, as happens with a bitmap image. What is it and how to fix it?

Here is the html and css code:

<div class="wrapperSvgImage"></div> .wrapperSvgImage { background-image: url(images/logo.svg); background-size: contain; border: 1px solid green; width: 40%; height: 40%; }

enter image description here

 .wrapperSvgImage { background-image: url(images/logo.svg); background-size: cover; border: 1px solid green; width: 40%; height: 40%; }

enter image description here

  • Would not hurt a piece of code. background-size: contain; does not work? - Moonvvell
  • Added sample code and how it looks. In general, svg is displayed only on the real domain, on the local 192.168.1.50 it does not output svg at all. Empty block. - manking
  • But don't you really need to specify the height and width? Then contain should work. Here read css-tricks.com/using-svg - Moonvvell
  • And without specifying the pixels can not be done? How to find out the size of svg in pixels? For example, I download a picture from an Internet how to find out its size in order to correctly specify in css? - manking

1 answer 1

On business: a block with a picture should be proportional to the picture if you want it not to stretch. If you do not know the size of the picture, open firebug and change the width / height until it fits.

 .wrapperSvgImage { background-image: url(http://s.cdpn.io/3/kiwi.svg); width: 100px; height: 82px; background-size: cover; border: 1px solid green; }

Here is an example. You can also set the resolution of the backgroud-size in proportions to the original image, but it is better to use the cover anyway. https://jsfiddle.net/0cs7w123/2/ - this is an example of the notorious Kiwi.

  • I do not understand, if the parent unit is specified in percent, then it turns out svg is not able to stretch (at least in 1 direction)? That is, the rubber design with svg can not be done? - manking
  • You can play with the parent element and the element with the picture set in percent. But you still need proportional to the image block. But I can be wrong, at least I had no problems using specific values ​​for svg. Same logo for example. Here is an example with a parent. jsfiddle.net/0cs7w123/3 - Moonvvell