Как занять всё свободное место картинкой? (Bootstrap/HTML)

Question

Как занять всё свободное место картинкой? (Bootstrap/HTML)

Рейтинг: -1Ответов: 1Опубликовано: 06.04.2023

В общем, делаю страницу на Bootstrap, сделал Navbar, сделал Footer.
Присвоил тегу body классы d-flex flex-column и стиль "min-height: 100vh" Структурно код выглядит так:

<html>
  <head>...</head>
  <body class="d-flex flex-column" style="min-height: 100vh">
    <nav>...</nav>

    <img src="{{ url_for("static", filename="images/authorization-bg.jpg") }}" alt="" class="img-fluid">

    <footer>...</footer>
  </body>
</html>

Код footer'а: https://pastebin.com/stakqrrb
Код navbar'a: https://pastebin.com/Kj0WeuiV

Без кода <img> между этими тегами, всё работает как надо - footer прижимается к низу, а навбар так и стоит сверху
Я использую bootstrap 5.0.2, и тут сказано про img fluid, я его попробовал, он действительно растягивает картинку на всю ширину, но вот высота у него уходит за рамки, и я не знаю как её ограничить. Соотношение сторон мне не сильно важно, поэтому можете предлагать решения связанные с этим. Тут видео-демонстрация того, что есть сейчас

bootstrap

Источник: Stack Overflow на русском

Answer 1

▲ 0

может быть попробовать рисовать фон не картинкой, а градиентом, добавив в css стиль background: linear-gradient(to top right, #00bfff, #000080);

что касается использования абсолютов - их лучше избегать, потому что блоки с абсолютным позиционированием могут двигать остальные блоки вокруг себя, не пуская их на нужное место.

Как занять всё свободное место картинкой? (Bootstrap/HTML)

Ответы