html - 带 Bootstrap 容器的半宽背景图像

Question

我正在尝试创建一个包含两列的网格 (col-6 | col-6)。但是右栏需要在其中包含图像。我尝试了以下方法:

 <div class="container-fluid" style="background-image: url('public/img/example.jpg'); background-size: 50% auto; background-position: center right; background-repeat: no-repeat;">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <h1>Hello</h1>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                </div>
            </div>
        </div>
    </div>

我的解决方案的问题是，当左侧的内容变大时:图像会创建一些空间以保持比例。 (红色背景标注的空间:

我无法制作此封面，因为我已经使用背景大小将图像设置为屏幕的一半。所以我想要做的是图像也填充/覆盖红色背景。我怎样才能做到这一点？

Answer 1

首先 - 我假设您使用的是 bootstrap 4。

您可以结合 native bootsrap 网格和 bootstrap 的 .img-fliud 使您的图像“响应式”(有关详细信息，请参阅 here)。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container mt-3">
  <div class="row">
    <div class="col-6">
      <h1>Header 1</h1>
      <p>Small text</p>
    </div>
    <div class="col-6">
      <img class="img-fluid" src="https://picsum.photos/seed/picsum/640/480" alt="Responsive image">
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-6">
      <h1>Header 2</h1>
      <p>Large text</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in vestibulum lorem. Aliquam elementum suscipit mi, gravida iaculis sapien malesuada maximus. Cras vehicula lectus at urna pharetra, non dictum felis mollis. Mauris vitae justo pretium
        justo lacinia rutrum efficitur rutrum leo. Sed tincidunt nec dui non posuere. In hac habitasse platea dictumst. Curabitur mauris turpis, gravida vitae mollis id, facilisis non urna.</p>
      <p>Donec rhoncus gravida tincidunt. Pellentesque interdum tortor sit amet euismod gravida. Phasellus blandit metus et diam euismod vulputate. Morbi accumsan, nunc vitae congue fermentum, lectus velit iaculis arcu, sed consequat orci nibh quis nisl.
        Sed nec diam vestibulum, ultrices augue porttitor, congue orci. Praesent ac justo massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse a odio molestie urna finibus commodo et hendrerit ligula.
        Etiam eleifend dui sit amet tortor suscipit sagittis. Etiam ex risus, pellentesque vel elementum vitae, elementum sed nibh. Aliquam libero lectus, blandit nec aliquam id, dictum vestibulum lorem. Fusce facilisis augue non justo ultrices eleifend.
        Ut ornare ut erat nec pellentesque. Donec posuere, urna vel lobortis mattis, nulla mi rhoncus lacus, nec porttitor eros nisi id quam. Nullam quam metus, dictum in mattis sed, suscipit id ex.</p>
    </div>
    <div class="col-6">
      <img class="img-fluid my-image" src="https://picsum.photos/seed/picsum/640/480" alt="Responsive image">
    </div>
  </div>
</div>

如果你想让你的图像与左栏的高度相同(或更大，取决于图像) - 你可以试试 min-height: 100%; 和 object-fit : 覆盖; 以保持宽高比。

.my-image {
  min-height: 100%;
  max-width: 100%;
  object-fit: cover;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container mt-3 mb-3">
  <div class="row">
    <div class="col-6">
      <h1>Header 1</h1>
      <p>Small text</p>
    </div>
    <div class="col-6">
      <img class="my-image" src="https://picsum.photos/seed/picsum/1000/1000" alt="Responsive image">
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-6">
      <h1>Header 2</h1>
      <p>Large text</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in vestibulum lorem. Aliquam elementum suscipit mi, gravida iaculis sapien malesuada maximus. Cras vehicula lectus at urna pharetra, non dictum felis mollis. Mauris vitae justo pretium
        justo lacinia rutrum efficitur rutrum leo. Sed tincidunt nec dui non posuere. In hac habitasse platea dictumst. Curabitur mauris turpis, gravida vitae mollis id, facilisis non urna.

      </p>
      <p>Donec rhoncus gravida tincidunt. Pellentesque interdum tortor sit amet euismod gravida. Phasellus blandit metus et diam euismod vulputate. Morbi accumsan, nunc vitae congue fermentum, lectus velit iaculis arcu, sed consequat orci nibh quis nisl.
        Sed nec diam vestibulum, ultrices augue porttitor, congue orci. Praesent ac justo massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse a odio molestie urna finibus commodo et hendrerit ligula.
        Etiam eleifend dui sit amet tortor suscipit sagittis. Etiam ex risus, pellentesque vel elementum vitae, elementum sed nibh. Aliquam libero lectus, blandit nec aliquam id, dictum vestibulum lorem. Fusce facilisis augue non justo ultrices eleifend.
        Ut ornare ut erat nec pellentesque. Donec posuere, urna vel lobortis mattis, nulla mi rhoncus lacus, nec porttitor eros nisi id quam. Nullam quam metus, dictum in mattis sed, suscipit id ex.</p>
    </div>
    <div class="col-6">
      <img class="my-image" src="https://picsum.photos/seed/picsum/1000/1000" alt="Responsive image">
    </div>
  </div>
</div>