How to fix svg image to specific height and remain responsive?

Question

I'm attempting to create a simple responsible logo inside of a navbar. I've recreated the problem with this codepen .

Essentially I have a .logo wrapper around an <svg> logo:

#navbar .logo {
  height: 80px;
}

#navbar .logo svg {
  width: 100%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  padding: 20px 0;
}

At around 500-600px in width you can see that the SVG element box is much wider than the actual logo. I can fix this by removing the height rule on the .logo div. But then the SVG goes beyond 80px in height.

How can I constrain the navbar height to 80px and maintain the actual width of the SVG so that the logo remains flush against the left side of the container?

If I replace width: 100%; with width: auto; , the logo flushes to the left like I want, but then the .logo div is much larger than the SVG.

Answer 1

I'm not sure if this is what you wanted. I set a max-width to the div .logo and made the width of the svg to 100%.

Check this out: https://codepen.io/samuellawrentz/pen/LBzRwM?editors=1100