Bootstrap 4 引导列中的响应（背景）图像，以匹配相邻列中内容的高度

左列中的图像需要根据相邻列中内容的高度进行响应

在此屏幕截图中： 图像占用了太多的垂直空间

仅在图像上使用

img fluid

类是不起作用的，因为这没有将图像拉伸到所需的高度

背景尺寸：封面是我通常需要的，但是我需要设置一个固定的高度，这与响应性相反

那么，如何使图像（或背景图像）具有响应性，同时使其与相邻列中内容的高度相匹配

当前代码：



一些文本…

更多

文本

和

东西

对于

更多

高度
您可以使用绝对定位的内部div来包含图像。因为行是flexbox，所以这是将左栏收缩到右栏文本高度的唯一方法

<div class="container-fluid px-0">
    <div class="row">
        <!-- img-fluid normal up to 'md' width -->
        <div class="col d-md-none">
           <img class="img-fluid" src="https://via.placeholder.com/3000x2000" alt="">
        </div>
        <!-- from 'md' width onwards convert to flex column 
        + add an absolute positioned inner div to contain the image -->
        <div class="col-md-6 px-0 d-none d-md-flex flex-column justify-content-center o-hidden">
            <div class="position-absolute o-hidden">
                <img class="mh-100 mw-100 d-block" src="https://via.placeholder.com/3000x2000" alt="">
            </div>
        </div>
        <div class="col-md-6">
            Some text...
            <br> more
            <br> text
            <br> and
            <br> stuff
            <br> for
            <br> more
            <br> height
        </div>
    </div>
</div>

.o-hidden {
    overflow:hidden; 
}


一些文字。。。

更多

正文

及

东西

为了

更多

高度
.o-隐藏{
溢出：隐藏；
}

您可以通过js根据其他列中的文本高度设置图像高度，如下所示


$（文档）.ready（函数（）{
var colTwoHeight=$（'#colTwoInner'）.height（）；
$（'#colOneImg'）.css（'cssText'，'height:'+colTwoHeight+'px！important；'）；
});

一些文本…

更多

文本

和

东西

对于

更多

高度
亲爱的，你是最棒的。非常感谢。