Bootstrap card image distorted in Internet Explorer - css

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

Answer 2

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

Answer 3

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.

Answer 4

the solution is to add d-block (display:block) to the parent div:
<div class="card d-block">
<img class="card-img-top" src="someimage.jpg">
</div>

Answer 5

use overflow: hidden for external container

Answer 6

Inline styling do the magic...
eg.: style="height: 100%; overflow: hidden;"

Answer 7

This is a known issue. You can fix this by adding width: 100%;
According to docs:
SVG images and IE 10 In Internet Explorer 10, SVG images with
.img-fluid are disproportionately sized. To fix this, add width: 100%
\9; where necessary. This fix improperly sizes other image formats, so
Bootstrap doesn’t apply it automatically.
You can check the docs in this link: https://getbootstrap.com/docs/4.3/content/images/

Answer 8

Based on the comments in the issue tracker the only thing that worked for me in IE11 was adding a height: 0.01px to the card image.
To make it IE specific I've added the following rule:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10, IE11 */
.card-img-top {
min-height: 0.01px;
}
}
In my case I also have a .card-footer which failed to render properly in IE11 with all previous answers. I'm using Bootstrap 4.1.3.

Answer 9

The best solution for me was to modify IE only.
Turns out it was the card-body text causing the most issues because it wasn't wrapping properly.
The card element did also need display:block; but again, only on IE.
No need to add block for other browsers, as it can affect using the mt-auto class or other utilities.
Here's the full solution:
<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>
Go somewhere
</div>
</div>
Then, add the following IE10+ only CSS:
/* 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%;
}
}

Answer 10

I had the same issue. Just added the regular old school class "img-responsive" & seems to be working fine in Chrome now.
<img class="card-img-top img-responsive" src="images/your-image.jpg" alt="Description">
Update BS version 4:
img-responsive
is now
img-fluid