Html 如何将svg图像固定到特定高度并保持响应？

我试图在导航栏内创建一个简单负责的徽标。我重新创建了与的问题

基本上，我在徽标周围有一个.logo包装：

在大约500-600px的宽度处，您可以看到SVG元素框比实际的徽标宽得多。我可以通过删除.logo div.上的高度规则来解决这个问题，但是SVG的高度超过了80px

如何将导航栏高度限制为80px，并保持SVG的实际宽度，以便徽标与容器的左侧保持齐平

---

如果我替换宽度：100%；宽度为：自动；，徽标会像我想要的那样向左刷新，但是.logo div比SVG大得多。

我不确定这是否是您想要的。我为div.logo设置了一个最大宽度，并将svg的宽度设置为100%

---

看看这个：

我看不出它有什么问题，问题比这个宽度大了一点。大约是这个尺寸的1.5倍。我想samuel得到了我想要的，虽然我需要的只是logo div上的最大宽度，而不是svg。我把最大宽度放错了元素。

#navbar .logo {
  height: 80px;
}

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