How do I stop this (attempted) responsive svg from being larger than its container on larger screens?

How do I stop this (attempted) responsive svg from being larger than its container on larger screens?
0.0 0

#1

This is my codepen : https://codepen.io/BLBaylis/pen/BwOmrK?editors=1100. Can’t really think of anymore context to add.

Thanks


#2

A way of doing that is to use it as a background for the div, define the div height and width in CSS and add “background-size:cover;”. To get it as a background you could convert it to base 64 and pass it straight into the CSS as a background-image or bring it in as a URL from a storage site elsewhere. That’s what I do, but there’s probably an easier way of doing it with a small svg like you have there.


#3

Why not use max-width?

.svg-container { 
	display: inline-block;
	position: relative;
	width: 75%;
        max-width: 300px;
}


#4

I’m gonna go with the max-width approach, but thanks for your input.


#5

I tried max-height on the various divs, yet I failed to think of this :confused:. Thanks!