Изображение загрузочной карты искажено в Internet Explorer

Bootstrap 4 все еще находится в альфа-версии, поэтому вы должны ожидать различных проблем.

Проблема с высотой изображения в IE 11 уже выявлена, и вы можете отследить ее здесь:

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

У меня была та же проблема, но когда я завернул содержимое карты в тег <a>, чтобы сделать его кликабельным, и он исправился, но высота карты была неправильной в IE11, я исправил это, добавив height: 100% к тегу <a>:

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

Если вы не хотите, чтобы ваша карточка была кликабельной, вы можете заменить <a> на <div> (я не проверял).

Добавление высоты: 100%; также можно сделать, чтобы:

.card img{
  height:100%;
}

если вы не хотите добавлять еще один класс и т. д., чтобы исправить проблемы в проводнике.

решение состоит в том, чтобы добавить d-block (display: block) к родительскому div:

<div class="card d-block">
    <img class="card-img-top" src="someimage.jpg">
</div>

использовать overflow: hidden для внешнего контейнера

Встроенные стили творят чудеса...

eg.: style="height: 100%; overflow: hidden;"

Это известная проблема. Это можно исправить, добавив width: 100%;

Согласно документам:

Изображения SVG и IE 10 В Internet Explorer 10 изображения SVG с .img-fluid имеют непропорционально большой размер. Чтобы исправить это, добавьте width: 100% \9; где необходимо. Это исправление неправильно определяет размеры других форматов изображений, поэтому Bootstrap не применяет его автоматически.

Вы можете проверить документы по этой ссылке: https://getbootstrap.com/docs/4.3/content/images/

Основываясь на комментариях в системе отслеживания ошибок, единственное, что сработало для меня в IE11, это добавление height: 0.01px к изображению карты.

Чтобы сделать его специфичным для IE, я добавил следующее правило:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE10, IE11 */
    .card-img-top {
        min-height: 0.01px;
    }
}

В моем случае у меня также есть .card-footer, который не смог правильно отобразиться в IE11 со всеми предыдущими ответами. Я использую Bootstrap 4.1.3.

Лучшим решением для меня было изменить только IE.

Выяснилось, что больше всего проблем вызывал текст card-body, потому что он не переносился должным образом.

Элемент card также нуждался в display:block;, но опять же, только в IE.

Нет необходимости добавлять блок для других браузеров, так как это может повлиять на использование класса mt-auto или других утилит.

Вот полное решение:

<div class="card ie-block">
    <img src="https://picsum.photos/500/300" class="card-img-top" />
    <div class="card-body">
        <div class="ie-wrapper"><h5 class="card-title ie-inner">Card title</h5></div>
        <div class="ie-wrapper"><p class="card-text ie-inner">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div>
        <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

Затем добавьте следующий CSS только для IE10+:

/* IE10+ specific styles go here */  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    .ie-block {
        display: block;
    }
    .ie-wrapper {
        display: flex;
    }
    .ie-inner {
        flex-basis: 100%;
    }
}

Я была такая же проблема. Только что добавил обычный класс старой школы «img-responsive» и, кажется, теперь отлично работает в Chrome.

<img class="card-img-top img-responsive" src="images/your-image.jpg" alt="Description">

Обновление BS версии 4:

img-responsive 

сейчас

img-fluid