Bootstrap 4 - <img> w-100 不适合父 flex div ...如果 <img> 小于父 div？答案

【问题标题】：Bootstrap 4 - <img> w-100 is not fitting parent flex div ... if <img> is smaller than parent div?Bootstrap 4 - <img> w-100 不适合父 flex div ...如果 <img> 小于父 div？
【发布时间】：2020-08-01 20:25:53
【问题描述】：

我对此很头疼，但似乎无法解决。

当我将 100 像素宽度的图像添加到桌面站点并对其应用 w-100 类时，它应该拉伸到父 div 的宽度（在本例中为列），对吗？当你这样做时，它就是这样工作的：

<div class="row">
    <div class="col-md-8">
        <img src="image-w100px.jpg" class="img-fluid w-100">
    </div>
    <div class="col-md-4">
    </div>
</div>

但是，如果我尝试在 flex div 中执行相同的操作（将图片居中/中间对齐到大量文本旁边，它将不起作用

<div class="row">
    <div class="col-md-8 flex">
        <div class="align-self-center">
            <img src="image-w100px.jpg" class="img-fluid w-100">
        </div>
    </div>
    <div class="col-md-4">
        Large amount of text (picture on the left should vertically align.
    </div>
</div>

我已经尝试了所有组合（单独的 img-fluid、单独的 w-100、img-fluid 和 w-100 的组合、删除类并添加 style="width: 100% !important"），但没有任何可能使我的 img 扩展得比原来的尺寸更大，它会压缩/调整到较小的尺寸，但不会扩展。

为什么这不起作用？

【问题讨论】：

不，只是引导程序 - 没有别的。我可以使用样板 BS4 模板复制它。所以干扰的不是其他代码。
无法复制
我更新了我的问题，因为我没有注意到我已将 flex 类应用于父 div。
Flex 是问题所在：stackoverflow.com/questions/41774646/…

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

在测试了一些之后，我找到了解决方案。将w-100 添加到align-self-center 类，它现在可以工作了：

<div class="row">
    <div class="col-md-8 flex">
        <div class="align-self-center w-100">
            <img src="image-w100px.jpg" class="img-fluid w-100">
        </div>
    </div>
    <div class="col-md-4">
        Large amount of text (picture on the left should vertically align.
    </div>
</div>

【讨论】：