Stretching the SVG to always cover parent div?

[335 3 Likes (Newbie)]

I am working on this map (not sure why the animation itself is not working on the Codepen).

 

I made it on a 27in monitor and on a big screen it works fine.

 

However, when I started working on the stylesheet for smaller screens I realised that this map on a typical 13in Mac laptop (1280x800) I realised that I have a bit of a white border at the bottom because the monitor is of different proportions to my image.

 

Is there a way of stretching the SVG to cover the full height of the DIV? 

 

I tried adjusting many different parameters but none of them seem to do anything. I also noticed that adjusting padding-bottom on

<div class="svg-container" style="padding-bottom: 58%;">

does not do anything to the size of the image!?

See the Pen vgwKKX by i76 (@i76) on CodePen

[Carl 9,710 Likes (Superhero)]

Hi 335,

 

We really have to keep our support focused on the GSAP API and not so much CSS / SVG layout issues.

I'm sure if you google or explore stackoverflow you can find your answer. Maybe this will help: http://stackoverflow.com/questions/5643254/how-to-scale-svg-image-to-fill-browser-window

 

If not, maybe post a new question on StackOverflow with a MUCH simpler SVG and no JavaScript code. The 1500 lines of code in your demo is a bit intimidating

[PointC 11,163 Likes (Superhero)]

Hi 335 

 

As Carl mentioned, we have to keep the support on GSAP here. That being said, I don't mind answering some small SVG questions here and there, but reduced demos are always best.

 

It sounds like you're trying to fill the screen width and height with your SVG no matter the window size. This can be done and what you're looking for is called preserveAspectRatio = "none". I'd caution though that your SVG will start to look stretched if you allow that to happen.

 

Here's a basic demo showing how odd things can look. Try changing the screen size and watch how strange the SVG can start to look if the aspect ratio gets too far from normal.

 

See the Pen PpqxLv by PointC (@PointC) on CodePen

 

Here's some more reading about preserveAspectRatio

 

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

 

Happy tweening.

[Jonathan 5,316 Likes (Superhero)]

Keep in mind that the <svg> element has a default CSS display property of inline. So you would need to change that to display:block in your CSS. Along with PointC's advice on using the preserveAspectRatio attribute. And don't forget that you can also add width:100%; and height: 100%; to your CSS for your SVG element fills its parent. You might need html, body to use height:100% so they inherit  cascade down.

 

But the easiest way is to just use the following on your svg CSS rule height: 100vh; and width: 100vw;

 

So you could do this:

html, body{
  height: 100%;
}

svg {
  display: block;
  height: 100%;
  width: 100%;
}

Or even better and less code:

svg {
   width: 100vw;
   height: 100vh;
}