Bootstrap card image distorted in Internet Explorer

Addding height:100%; can also be done to:

.card img{
  height:100%;
}

if you dont want to add another class etc to fix issues in explorer.

Bootstrap 4 is still in alpha so you should expect various issues.

The issue with image height in IE 11 has already been identified and you can track it here:

https://github.com/twbs/bootstrap/issues/21885

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