html - Bootstrap中带有文本列的全高图像

Question

我想要一些非常简单的东西，但我无法使用 Bootstrap (4.3.1) 来解决它。它看起来正是我想要的，但我知道 css 不正确。

我想要一个覆盖整个 col-xs-4 列的高度和宽度以及固定位置的图像，以便在滚动 col-xs-8 内容时它保持静止。

在移动设备上，我希望图像是 col-12 和 col-xs-8 列（所以基本上是堆叠的）。

我似乎无法为此找出正确的 css .. 正如您在我的片段中看到的那样，图像的硬宽度为 40%，如果我将其设为 100%，它只会忽略 Bootstrap 列并填充整个屏幕..

.bg-image {
  position: fixed;
    top: 0;
    left: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
    width: 40%;
    border-right: 10px solid #f5f5f5;
    overflow: hidden;
}

.bg-image-content {
background-image: url(https://www.marenklif.nl/wp-content/uploads/2016/07/kabouter-rood.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-5 col-xs-12">
      <div class="bg-image">
        <div class="bg-image-content">
        
        </div>
      </div>
    </div>
    <div class="col-7 col-xs-12">

      jnsjv uwhv ihvi vhfi viuhv fihv jnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihv
      
    </div>
  </div>
</div>

标签： htmlbootstrap-4

Answer 1

添加到 body 溢出隐藏以防止页面滚动，因此您可以修复图像使用 100vh 并为文本创建另一个具有溢出滚动的 div。

body {
    overflow: hidden;
}

.bg-image-content {
background-image: url(https://www.marenklif.nl/wp-content/uploads/2016/07/kabouter-rood.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.scroll {
    overflow: scroll;
    height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-5 col-xs-12">
      <div class="bg-image">
        <div class="bg-image-content">
        
        </div>
      </div>
    </div>
    <div class="col-7 col-xs-12">
      <div class="scroll">
      jnsjv uwhv ihvi vhfi viuhv fihv jnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihvjnsjv uwhv ihvi vhfi viuhv fihv
      </div>
    </div>
  </div>
</div>