Bootstrap 4 заставляет изображение бренда navbar перекрывать изображение на большом экране и сжимать изображение на маленьком экране

Question

Вот что я пытаюсь сделать.Я хочу, чтобы изображение бренда navbar перекрывало navbar без изменения его высоты (navbar имеет фиксированную высоту 80 пикселей).Это вроде работает, но я не могу получить изображение полностью раскрытым, оно обрезается сверху.Я попытался 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;}, с которым вы не хотите связываться.

---

Ссылка: "Правка" , это совсем другой вопрос.Ответ на этот вопрос будет вреден для всех, у кого есть подобная проблема, так как это снижает вероятность того, что он найдет ответ.
Старайтесь не задавать несколько вопросов одновременно.Ваши вопросы должны оставаться полезными для тех, у кого похожая проблема, поэтому вам нужно задавать их отдельно.