Jump to content
Search Community

Stretching the SVG to always cover parent div?

335 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

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.

:)

  • Like 3
Link to comment
Share on other sites

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

:)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...