我正在尝试使用bootstrap创建一个可重复使用的元素，该元素将用于不同纵横比的图像。为了使其工作，我需要裁剪图像的右侧像这样。
<div class="container">
<div class="row">
<div class="col-12">
<div class="card shadow h-100">
<div class="card-body-article">
<div class="row no-gutters">
<div class="col-3 d-flex align-content-center">
<div class="article-img-crop">
<img class="article-img" src="https://images.amcnetworks.com/blogs.amctv.com/wp-content/uploads/2013/01/bb-s5-skinny-pete-interview-560.jpg">
</div>
</div>
<div class="col-9">
<div class="row no-gutters">
<div class="col-6">
<div class="card-title">Test</div>
</div>
<div class="col-6">
<div class="text-muted text-right">03/05/2020 12:52pm</div>
</div>
</div>
<div class="row no-gutters">
<div class="text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida lectus eu elit maximus rhoncus. Vivamus vitae enim in felis consequat efficitur a quis dui. Aenean id tristique dui, in finibus dui. Etiam ut nunc lobortis, tempor odio ut, ornare metus. Donec convallis tincidunt velit. Nullam ipsum est, condimentum quis nunc quis, sollicitudin condimentum orci. Nunc vehicula porttitor porttitor. Duis et augue vestibulum, iaculis eros vitae, lacinia urna.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.article-img-crop {
position: relative;
overflow: hidden;
border-top-left-radius: 0.35rem;
border-bottom-left-radius: 0.35rem;
}
https://jsfiddle.net/ce3mxnLp/
问题是，当前形式的元素将采用源图像的高度。我希望元素的高度由文本的数量决定，而图像应该按比例缩放(保持纵横比(，并只剪切右侧的不同部分。考虑到引导列是柔性盒，这可能吗？我似乎无法使用列的高度来约束另一个元素的属性。
如有任何帮助，我们将不胜感激。谢谢
对于图像，请在图像上设置宽度和高度。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
.article-img-crop {
position: relative;
overflow: hidden;
border-top-left-radius: 0.35rem;
border-bottom-left-radius: 0.35rem;
left:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card shadow h-100">
<div class="card-body-article">
<div class="row no-gutters">
<div class="col-3 d-flex align-content-center">
<div class="article-img-crop">
<img class="article-img" src="https://images.amcnetworks.com/blogs.amctv.com/wp-content/uploads/2013/01/bb-s5-skinny-pete-interview-560.jpg" style="width:300px;height:100%;">
</div>
</div>
<div class="col-9">
<div class="row no-gutters">
<div class="col-6">
<div class="card-title">Test</div>
</div>
<div class="col-6">
<div class="text-muted text-right">03/05/2020 12:52pm</div>
</div>
</div>
<div class="row no-gutters">
<div class="text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida lectus eu elit maximus rhoncus. Vivamus vitae enim in felis consequat efficitur a quis dui. Aenean id tristique dui, in finibus dui. Etiam ut nunc lobortis, tempor odio ut, ornare metus. Donec convallis tincidunt velit. Nullam ipsum est, condimentum quis nunc quis, sollicitudin condimentum orci. Nunc vehicula porttitor porttitor. Duis et augue vestibulum, iaculis eros vitae, lacinia urna.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/xj408apo/