帶引導容器的半寬背景圖像

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

首先-我假設您使用引導程序 4。

您可以將本機引導網格和引導的.img-fliud fliud 結合起來，使您的圖像“響應”（有關詳細信息，請參見此處）。

 <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: cover; 以保持縱橫比。

 .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>