我需要一个包含图像、嵌入视频和一些文本的行。网站使用Bootstrap进行响应行为，但是，当页面宽度减小时，此行中的对象不应堆叠。
对于第一列中的图像，当页面宽度减小时，第二列中的嵌入视频存在调整大小的问题。看起来，随着页面宽度的减小和行高度变得小于第一列中图像的高度，第二列中的嵌入视频开始在上下显示黑条，并失去其纵横比。即使图像本身看起来确实在改变高度(因此是"响应性的"(，也会发生这种情况但我试图解决的真正问题是第二列中嵌入的视频的问题，当页面宽度减小时(第一列中有图像(，视频会变得一团糟
我的代码如下：
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3 border">
<a href="https://placeholder.com"><img class="img-fluid" src="https://via.placeholder.com/30x225" alt="image"></a>
</div>
<div class="col-6 border embed-responsive embed-responsive-16by9" id="vid">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kyJUQuaECrg" allowfullscreen></iframe>
</div>
<div class="col-3 border d-flex">
<span class="mt-auto">Some Text</span>
</div>
</div>
</div>
</body>
</html>
问题似乎集中在第一列中的图像周围。如果我删除图像并在列中放置文本，那么第二列中嵌入的视频将在所有窗口宽度下正确调整大小。
尽管添加到第一列中图像的"img fluid"类似乎会导致图像具有响应高度，但当页面宽度缩小时，第二列中的视频会变得一团糟。我已经尝试过对图像和包含图像的div/col使用百分比进行各种高度操作，但到目前为止，我还找不到解决这个问题的组合。
最终，我希望能够为第一列中的图像指定一个高度，该高度定义为其容器的百分比。我需要图像具有响应的高度和嵌入的视频缩放，但在所有页面宽度下保持其外观(没有黑条和正确的纵横比(。
顺便说一下，第一列中的图像可以替换为向左旋转90度的文本。但是，任何在引导列中旋转文本的尝试都会导致许多其他对齐问题。
您可以将图像的高度设置为100%，这将是列的高度，因此它将具有响应性。
我发现，如果我对第一列(包含图像(使用Bootstrap的嵌入响应类，并将图像包装在<div>中，那么第二列中的嵌入视频会正常工作。
出于某种原因，这不适用于我在上面问题中的代码中使用的占位符图像周围的锚点。因此，我在下面提供了我的更新代码，并引用了一张本地图片。
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3 embed-responsive border">
<div class="embed-responsive-item justify-content-end d-flex ">
<img class="mt-auto" style="height: 100%;" src="img/local_image.jpg">
</div>
</div>
<div class="col-6 border embed-responsive embed-responsive-16by9" id="vid">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kyJUQuaECrg" allowfullscreen></iframe>
</div>
<div class="col-3 border d-flex">
<span class="mt-auto">Some Text</span>
</div>
</div>
</div>
</body>
</html>