javascript - 如何设置列和容器的最大高度以便图像适合 bootstrap 4 中的整个页面？

Question

我使用 bootstrap 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>

一切正常且响应迅速，但这是我从这段代码中得到的结果:

我想要的首选结果是:

我使用的图片尺寸是6000 X 4000

我尝试过的解决方案:

html, body {
height: 100%;

}

我已经使用 Google 开发工具检查了浏览器，我可以看到正文是 100%，但仍然不是我想要的结果。

我从 Bootstrap 中使用了 h-100，但仍然得到相同的结果。

我使用了 height: 100vh; 但在较小的设备上它没有响应

我已经检查了这个链接:

Height not 100% on Container Fluid even though html and body are

还是得不到我想要的结果。

如何在 bootstrap 4 中为图像提供全高？

更新:

分辨率为 nikolay 解决方案后:1156 x 1013

Answer 1

您似乎想将图像用作背景。所以我的建议是这样做，因为跨浏览器支持更好(我并不是说不能单独使用 <img> 来完成，只是使用 background-image 更容易)。请注意我要离开 <img>加入标签有两个原因:

• SEO 索引(如果您需要)
• 在移动设备上正确调整列的大小。

然而，<img>未呈现。你总是在看 <div> 的背景图片.

这是一个获取 src 的解决方案第一个的属性 <img>每个元素 .column-image并将其用作 <div> s backgroundImage .要使其正常工作，请确保 <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> ，资源(图片)只加载一次。