Bootstrap 4 使导航栏品牌图像在大屏幕上重叠并在小屏幕上缩小以适应

Question

这就是我想要做的。我想让导航栏品牌图像与导航栏重叠而不改变它的高度（导航栏的固定高度为 80px）。 它有点工作，但是我无法让图像完全曝光，它在顶部被切割。我试过vertical-align: top，但它只是稍微改变了位置，图像仍然被切断。我希望它完全从屏幕顶部开始，没有任何填充。

在屏幕小于md 的设备上，重叠图像被隐藏并显示另一个图像，现在应该是img-fluid，并将其大小调整为导航栏的大小。但是，当调整屏幕大小以使导航栏折叠时，导航栏大小仍为80px，但图像开始与其重叠，折叠切换按钮也变得混乱。 我怎样才能让这两个东西都起作用？

这是一个代码笔：https://codepen.io/anon/pen/QYmMyg

编辑：另外，我注意到将导航栏设置为固定高度实际上可以防止折叠工作，因为高度是有限的。有什么办法可以增加导航栏的高度并保持重叠图像并保持折叠工作？

Answer 1

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

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

问题出在.navbar>.container { align-items: center;}，你不想惹它。

---

Ref：“编辑”，这完全是一个不同的问题。在这里回答对任何有类似问题的人都是有害的，因为这会降低他们找到答案的机会。
避免一次问多个问题。您的问题需要对任何有类似问题的人都有帮助，因此您需要单独提问。