I wanted to make a website for the first time, but it’s too hard
Here I downloaded a world map.I set the width: 100% height: auto, but why is the map cropped? I want to know the reason.
and also I wonder why the background color doesn’t fill up
I put background color in body tag in css file, but it was still white. I put svg in inline.
2
Answers
object-fit property
There is a css property called
object-fit
This will prevent your image from being cropped.
Another commonly used value for this property is
cover
cover
makes your img fits the width and the height with no whitespaces, and the image will be cropped.More info: W3Schools object-fit
There is a lack of information in your question. But I can make an educated guess at what your problem is.
The most likely reason you are having problems is that you haven’t given the browser enough information on how to scale the map. In order to scale the SVG, the browser needs to know what the extent of the content in the SVG is. It does that by using the SVG attribute
viewBox
. Awidth
andheight
by themselves is not enough. Unfortunately, your SVG does not have aviewBox
defined. So the browser will not scale it. It will just draw it at 1:1 scale. Meaning that most of the map may be off the screen because the map default size is 1009.6727 x 665.96301 (pixels).The solution is to give the SVG a
viewBox
attribute. You can just use the existing width and height values for that. In my example, I’ve just rounded them up to the nearest whole number:Note: in case it isn’t obvious: I’ve reduced the map to two countries so it will fit in a code snippet.