Как установить максимальную высоту столбца и контейнера, чтобы изображение загружалось на всю страницу в начальной загрузке 4?

У меня есть две колонки подряд с начальной загрузкой 4. Я хочу использовать весь экран, чтобы показать изображение. Это мой код:

<div class="container-fluid" style="padding-left:0px;">
        <div class="row">
            <div class="col-md-6 ">
                <img class="img-fluid" src="jumbo_background.jpg" />
            </div>
            <div class="col-md-6">
                <div class="contact-wrapper">
                  <p>Test</p>
                </div>
            </div>
        </div>
   </div>

Все работает хорошо и отзывчиво, но вот результат, который я получаю из этого кода:

результат 1

Предпочтительный результат, который я хочу, это:

Результат2

Я использую изображение размером 6000 х 4000

Решения, которые я попробовал:

html, body {
height: 100%;

}

Я проверил браузер с помощью инструмента Google Dev, и я вижу, что тело на 100%, но все еще не тот результат, который я хочу.

Я использовал h-100 от начальной загрузки и все еще получаю тот же результат.

Я использовал height: 100vh; но на меньших устройствах это не отзывчиво

Я проверил эту ссылку:

Высота не 100% на контейнерной жидкости, хотя HTML и тело

Все еще не получить результат, который я хочу.

Как я могу придать изображению полную высоту в начальной загрузке 4?

ОБНОВИТЬ:

После николая решение на разрешении: 1156 x 1013

result3

Всего 2 ответа


Вот решение:

html, body, 
.container-fluid .row, 
.container-fluid .row .col-md-6, 
.container-fluid .row .col-md-6 img { 
height: 100vh !important;
}

Добавьте пример для адаптивного мобильного представления, как вы сделали выше, чтобы я мог написать решение.


Вы, кажется, хотите использовать изображение в качестве фона. Поэтому я предлагаю сделать именно это, так как поддержка кросс-браузер лучше (я не говорю, что это невозможно сделать с помощью одного <img> , только что проще с background-image ). Обратите внимание, что я оставляю <img> по двум причинам:

  • SEO индексация (если вам это нужно)
  • правильно определить размер колонки на мобильных устройствах.

Однако <img> не отображается. Вы всегда смотрите на фоновое изображение <div> .

Вот решение, которое захватывает атрибут src первого элемента <img> в каждом .column-image и использует его как backgroundImage <div> . Чтобы это работало, убедитесь, что у <div> есть класс image-column :

$(function() {
  $('.image-column').each(function() {
    const src = $('img', this).eq(0).attr('src');
    if (src) {
      $(this).css({ backgroundImage: `url(${src})` })
    }
  })
});
.image-column {
  min-height: 100vh;
  background: transparent no-repeat center /cover;
}

.image-column .img-responsive {
  visibility: hidden;
}

@media(max-width: 767px) {
  .image-column {
    min-height: 0;
  }
  .image-column .img-responsive {
    width: 100%;
    height: auto;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 image-column">
      <img src="https://i.picsum.photos/id/237/600/400.jpg" class="img-responsive">
    </div>
    <div class="col-md-6">
      <div class="contact-wrapper">
        <p>Test</p>
      </div>
    </div>
  </div>
</div>

Примечание: даже если он используется как src для <img> и background-image для <div> , ресурс (image) загружается только один раз.


Есть идеи?

10000