如何使 Bootstrap 4 列中的图像高度响应，以便不影响相邻列中的嵌入视频？

Question

我需要一行包含图像、嵌入视频和一些文本。该站点使用 Bootstrap 响应行为，但是，当页面宽度减小时，该行中的对象不应堆叠。

对于第一列中的图像，第二列中的嵌入视频在页面宽度减小时无法调整大小。看起来随着页面宽度的减小和行高变得小于第一列中图像的高度，第二列中的嵌入视频开始在上方和下方显示黑条并失去其纵横比。即使图像本身似乎在改变高度（因此成为 "responsive"），也会发生这种情况。 但我要解决的真正问题是第二列中嵌入的视频在页面宽度减小时变得混乱的问题（第一列中有图像）。

我的代码如下：

<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>

问题似乎集中在第一列中的图像周围。如果我删除图像并在列中放置文本，则第二列中的嵌入视频会正确调整所有 window 宽度。

虽然添加到第一列图像的 "img-fluid" class 似乎导致图像具有响应高度，但当页面宽度缩小时，第二列中的视频变得混乱.我尝试了各种使用百分比对图像和包含图像的 div/col 进行高度操作，但到目前为止我找不到解决此问题的组合。

最终，我希望能够在第一列中指定图像的高度，该高度定义为其容器的百分比。我需要图像具有响应高度和嵌入式视频以缩放但在所有页面宽度下保持其外观（没有黑条和正确的纵横比）。

顺便说一句，第一列中的图像可以替换为向左旋转 90 度的文本。但是，任何在 Bootstrap 列中旋转文本的尝试都会导致许多其他对齐问题。

Answer 1

那么您可以将图像的高度设置为 100%，这将是列的高度，以便响应。

Answer 2

我发现如果我对第一列（包含图像）使用 Bootstrap 的嵌入响应 class 并将图像包装在 <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>

如何使 Bootstrap 4 列中的图像高度响应，以便不影响相邻列中的嵌入视频？

How do I make an image's height responsive in a Bootstrap 4 column so that an embedded video in an adjacent column is not affected?

html

css

embed

image

bootstrap-4