html - 自动调整/裁剪 bootstrap col 中图像的高度，使其等于另一个 col 的高度

Question

我有一个包含 2 列的 boostrap 行，左列包含一些文本，右列包含图像。

我想将右列的最大高度设置为等于左列的高度 - 这可能会因窗口大小的调整而改变(具有 min-height 属性)。

我想裁剪我认为可以在 css 中使用“object-fit:cover”实现的图像

我的代码如下:

<div class="row" id="test-row">
    <div class="col-2" id="test-left">
        Some random text
    </div>
    <div class="col-10" id="test-right">
        <img src="img_source" class="img-responsive">
    </div>
</div>

我看过在线和其他帖子，但似乎都基于不需要裁剪或缩小的列。

Answer 1

如果您愿意将您的图像作为背景图像，这是可能的。

<style>
     #bg-image {
        background-image: url('example.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
     }
</style>
<div class="row" id="test-row">
    <div class="col-2" id="test-left">
            Some random text
    </div>
    <div class="col-10" id="test-right">
        <div id="bg-image"></div>
    </div>
</div>

否则使用 javascript 窗口调整大小事件来设置高度。