Не получается растянуть на весь footer. Как исправить?

Question

<footer class="navbar-fixed-bottom">
<img class="img footer-wraper img-responsive img-fluid" src="{% static 'gallery/image/BG/bg-footer.png' %}">

Как растянуть изображение на весь футер? Использовал только классы библиотеки bootstrap4.

Answer 1

Попробуйте так:

.footer {
    background-image: url('https://lh3.googleusercontent.com/proxy/QMf5RElgFtAdTgYGAXg_T_27QUnCjAwN8C4-oJXzsKCrAOLTkay6M1kUOPeUPDFhAUD1n8assFol8QhPWbcbkm1rORHtPZ-y3gih=w3840-h2160-p-k-no-nd-mv');
    width: 100%;
    height: 300px;
    background-position: 50% 50%;
    background-size: cover;
}

<footer class="footer"/>

Или в вашем случае со вложенным img можно попробовать так:

.footer {
  position: relative;
  width: 100%;
  height: 300px;
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
}

<footer class="footer">
  <img src='https://lh3.googleusercontent.com/proxy/QMf5RElgFtAdTgYGAXg_T_27QUnCjAwN8C4-oJXzsKCrAOLTkay6M1kUOPeUPDFhAUD1n8assFol8QhPWbcbkm1rORHtPZ-y3gih=w3840-h2160-p-k-no-nd-mv' class='image' />
</footer>

БЛОГ НА HUSL

Не получается растянуть на весь footer. Как исправить?

Ответы (1 шт):