Bootstrap card image distorted in Internet Explorer

Question

I'm using bootstrap v4 cards in my layout and unfortunately, the images are distorted in Internet Explorer 11. It seems that IE completely ignores the height: auto attribute given by the img-fluid class. Is it necessary to apply a custom height to the card images? However, the cards render perfectly in Chrome and Firefox. Interestingly, if I change the engine to IE 10 (in the F12 console), the problem is gone.

As images with class img-fluid which are not wrapped by cards are displayed respecting their original ratio, I think the problem corresponds to the card layout.

   <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/1.jpg" alt="Step 1" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 1</h3>
              <p class="card-text">Text 1</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/2.jpg" alt="Step 2" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 2</h3>
              <p class="card-text">Text 2</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/3.jpg" alt="Step 3" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 3</h3>
              <p class="card-text">Text 3</p>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

I had the same problem, but when I wrapped the content of the card in a <a> tag to make it clickable and it fixed itself, but the height of the card was wrong in IE11, I fixed that by adding height: 100% to the <a> tag :

<div class="col-md-4">
    <div class="card h-100">
        <a href="/document" style="height:100%;">
            <img class="card-img-top img-fluid" src="foo.jpg">
            <div class="card-block">
                <h4>doc number 4</h4>
                <p class="card-text">yada yada</p>
            </div>
        </a>
    </div>
</div>

If you don't want your card to be clickable, you could replace the <a> by a <div> (I haven't tested it).