Bootstrap 4使Navbar品牌的图像在大屏幕上重叠，在小屏幕上收缩以适应

Question

这就是我要做的。我想有navbar品牌的图像重叠的navbar，而不改变它的高度（navbar有固定的80px的高度）。它有点工作，但我不能让图像完全暴露，它是被削减在顶部。我尝试了vertical-align:top，但它只是稍微改变了位置，图像仍然被切断。我希望它完全从屏幕顶部开始，没有任何填充。

在屏幕小于md的设备上，重叠的图像被隐藏，另一个图像被显示，现在应该是img-fluid并将其大小调整为navbar的大小。然而，当调整屏幕大小以使navbar折叠时，navbar的大小仍然为80px，但图像开始与之重叠，折叠切换按钮也会被弄乱。我怎样才能使这两件事都起作用呢？

下面是一个代码页：https://codepen.io/anon/pen/qymyg

编辑：还有，我注意到把navbar设置到一个固定的高度实际上阻止了塌陷的工作，因为高度是有限的。有没有什么方法可以增加navbar的高度，保持重叠的图像，也保持折叠工作？

Answer 1

.navbar-brand {
  transform: translateY(calc(50% - 40px));
  padding-top: 0;
}

...将修复您的问题（其中40px是.navbar高度的一半）。
工作示例：https://codePend.io/andrei-gheorghiu/pen/pglroz

问题的根源在于.navbar>.container{align-items：center；}，您不想弄乱它。

参考：“编辑”，这是一个完全不同的问题。在这里回答问题会对遇到类似问题的人不利，因为这样会减少他们找到答案的机会。
避免一次问多个问题。你的问题需要对任何有类似问题的人都有帮助，所以你需要分别问他们。