make images look better (centre + cover)

[alifeee]

images look kinda bad, u know

they would be better if they were

• centred
• covered the extent of the country shape (some are way too zoomed in)

[alifeee]

I tried a number of things to try and make this work:

Posts mainly from Stack Overflow

• How to make SVG "fill" act in a similar way to CSS "background-size: cover"
  the image size here is "100%". That percentage is of the total SVG size. We do not want that, we want more like "20%" (different per-country based on the size). I couldn't figure out how to set size based on parent element (i.e. the country path)
• Fill SVG path element with a background-image
  not sure this is that relevant
• Fill 100% of SVG path with image
  similar to above, we do not want "100%" width. A lot of these people seem to want a single SVG path to cover an image (i.e., to make the outline of an image "cloud shaped", or whatever)
• Is it possible to center a SVG pattern image fill without using JavaScript?
  again did not go anywhere

It seems JavaScript may have to be used (to loop over every country, get the height/width, and set the height/width of the image background)

Here is a lot of information on SVG patterns::

http://vanseodesign.com/web-design/svg-pattern-attributes/

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

[EkulRF]

Kmn omg this is a faf