Bootstrap 4：col的大小与右边的col和图像填充的col相同

Question

在我的左侧col中有一个<img>，在我的右侧col中有一些文字。我希望左侧的col与右侧的col具有相同的高度。然后，我要<img>填充左侧的col。看起来很简单，但我做不到。这是我当前的代码：

                <div class="row">
                <div class="col-6 h-100">
                    <img class="img-fluid" src="@/assets/images/employee4.jpg">
                </div>
                <div class="col-6">
                    <h1 class="heading">HERREN</h1>
                    <hr>
                    <div class="row">
                        <h2 class="serivce">SCNHEIDEN</h2>
                        <h2 class="price float-right">18€</h2>
                    </div>
                    <div class="row">
                        <h2 class="serivce">SCNHEIDEN</h2>
                        <h2 class="price float-right">18€</h2>
                    </div>
                    <div class="row">
                        <h2 class="serivce">SCNHEIDEN</h2>
                        <h2 class="price float-right">18€</h2>
                    </div>
                    <div class="row">
                        <h2 class="serivce">SCNHEIDEN</h2>
                        <h2 class="price float-right">18€</h2>
                    </div>
                    <div class="row">
                        <h2 class="serivce">SCNHEIDEN</h2>
                        <h2 class="price float-right">18€</h2>
                    </div>
                    <div class="row">
                        <h2 class="serivce">SCNHEIDEN</h2>
                        <h2 class="price float-right">18€</h2>
                    </div>
                </div>
            </div>

它看起来像这样：

如您所见，左侧的col具有右侧的col的高度，而不是相反的高度，并且图像无法填充`col``

有什么想法吗？

Answer 1

将该图像设置为左栏的背景图像

CSS代码

#leftcol {
background-image:url("image url");
background-size:cover;

}