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>

score 15 · Answer 1 · answered Mar 10 '17 at 09:04

15

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

answered Mar 10 '17 at 09:04

Christophe Le Besnerais

3,895
3
24
44

4

Yes, replacing the `` with `
` is also working.
– Spri Jun 16 '17 at 13:17
1

Adding h-100 to the worked for me like magic. Thank you Christophe. – Melissa Freeman Jan 18 '19 at 05:26
Be advised: this breaks the alignment of `card-footer`s in `card-deck`s. What this (and the `div` solution by Spri) effectively does, is to kill the flexbox. You could achieve the same thing by directly setting the display of the card to `block`. The root issue is IE11 not properly supporting images as flexbox elements: https://stackoverflow.com/questions/36822370/flexbox-on-ie11-image-stretched-for-no-reason – Oliver Schimmer Aug 25 '20 at 18:37

score 5 · Accepted Answer · answered Feb 08 '17 at 13:32

5

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

answered Feb 08 '17 at 13:32

Carol Skelly

351,302
90
710
624

score 4 · Answer 3 · answered Feb 21 '19 at 19:52

4

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.

answered Feb 21 '19 at 19:52

Maximus

41
4

score 2 · Answer 4 · answered Apr 28 '19 at 23:19

2

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>

answered Apr 28 '19 at 23:19

Jonathan Laliberte

2,672
4
19
44

score 1 · Answer 5 · answered Oct 27 '17 at 12:54

1

use overflow: hidden for external container

answered Oct 27 '17 at 12:54

Mihon

11
1

score 1 · Answer 6 · edited Jan 24 '19 at 11:20

1

Inline styling do the magic...

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

edited Jan 24 '19 at 11:20

Pritamkumar

682
1
11
30

answered Jan 24 '19 at 10:24

Ras C-kay sKatle

41
1
4

score 1 · Answer 7 · answered Feb 14 '19 at 23:49

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/

score 1 · Answer 8 · answered Jan 07 '20 at 10:32

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.

Dario Zadro · Answer 9 · 2020-01-25T23:22:36.203

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>
        <a href="#" class="btn btn-primary">Go somewhere</a>
   </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%;
    }
}

Kerry7777 · Answer 10 · 2018-04-04T06:13:10.387

-1

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

edited Apr 04 '18 at 06:13

answered Apr 04 '17 at 05:17

Kerry7777

4,246
1
18
28

Bootstrap card image distorted in Internet Explorer

10 Answers10