CODEWITHSUNDEEP
csssvgscaleaspect-ratio
Paulos3000
Paulos3000

Reputation: 3545

Maintain svg aspect ratio, and scale to smallest axis

I have an svg that is set to 100% width, filling a container. The container is set to 100% of the body, so that when the browser window is narrowed on the x-axis, the svg shrinks so that it remains at 100% width and scales down accordingly.

However, when I then shrink the window on the y-axis, the svg remains as is. I want it to always remain with constrained proportions (i.e. a square remaining at 1:1 under all circumstances), but scale to be 100% of the smallest axis.

.svg-container {
    position: relative;
    width: 100%;
    height: 100%;
}


.svg {
    width: 100%;
    height: 100%;
}

At the moment, it shrinks on either axis, but it will become rectangular either way, defeating my objective of maintaining the original aspect ratio.

Can anyone offer a solution that maintains aspect ratio, as well as maintaining 100% of the smallest axis on the viewport?

Upvotes: 0

Views: 181

Answers (1)

Nick Tirrell
Nick Tirrell

Reputation: 431

I think, because your container is 100% of the page height, your .svg is getting squished. Try this...

   .svg-container {
        position: relative;
        width: 100%;
        height: auto;
    }

Upvotes: 1

Related Questions