图像流体不缩放列大小

Question

我找不到有关以下问题的最新答案：当我尝试使用响应式图像（class="img-fluid"）时，它会拉伸出一个荒谬的高度，但保持正确的宽度。

我正在尝试：

<div class="row">
    <div class="col-4">
       <div class="col-12">
          <div class="row">
             <div class="col-md-4">
                <div class="row">
                   <img src="https://via.placeholder.com/150" class="img-fluid">
                </div>
             </div>
             <div class="col-md-8">
                <h3>
                   <small>Brand</small><br />
                   Product name
                </h3>
             </div>
          </div>
       </div>
    </div>

该问题在除firefox之外的所有浏览器上都会发生。