Bootstrap flex 行图像与 div 高度相同答案

【问题标题】：Bootstrap flex row image same height as divBootstrap flex 行图像与 div 高度相同
【发布时间】：2021-02-08 15:53:19
【问题描述】：

我正在使用最新的 Bootstrap 5.0 beta 版本，并且我有以下 html sn-p：

    <div>
        <div class="d-flex flex-row">
            <img src="img/funny.png" alt="">
            <div class="ms-4">
                This is just
                <br>a simple test
                <br>with some line breaks
                <br>just to get some height
            </div>
        </div>
    </div>

因此，在带有文本上下文的 div 左侧带有图像的 flexbox 行。现在我想让图像与 div 的高度相同。我怎样才能以响应的方式做到这一点？现在我得到这样的东西

【问题讨论】：

这是不可能的，如果不为图像提供最大高度，此问题的可能解决方案是，您可以将内容对齐到图像的中心，或者如果内容大于图像，那么您可以将图像对齐到图像的中心。 display:flex; justify-content:center; align-items:center
能否展示一个完整的样本？
@fraz gsell 我对你的代码做了一些小的改动，并在下面上传了我的答案。请看一看。示例：codeply.com/p/p7mfcnWVZ7

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

flex 容器无法实现。给出 img max-height width:auto 的问题在哪里？

【讨论】：

【解决方案2】：

我对您的代码做了一些小的修改，现在您可以放置任意大小的图像，相应的文本将保持居中。示例：here

<div class="d-flex flex-row">
<div class="align-self-center">
    <img src="https://via.placeholder.com/400/09f.png/fff%20C/O%20https://placeholder.com/#How_To_Use_Our_Placeholders" alt="">
</div>
<div class="ml-4 align-self-center">
    This is just a simple test with some line breaks just to get some height
</div>

【讨论】：

感谢您的更新，但我一直在寻找一种方法，使图像高度自动适应另一个 div 中的文本高度