'Image-fluid not scaling col size

I can't find a recent answer regarding the following issue: When I try to use a responsive image (with class="img-fluid") it stretches an absurd height but keeps the correct width.

What I am trying:

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

The issue effects on MacOS Safari and Chrome except firefox.

bootstrap-4

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Image-fluid not scaling col size

Sources

Related Questions