Bootstrap: Wrong Img-Height when using 'img-fluid' inside a card on ie11

[soniapello]

I have made a section with cards it works well on firefox chrome ie microsoft edge but it breaks on ie 11 on mozilla I get this result

and on ie11 I get this result

codepen
Someone know why I have this pb on ie11 ?

[grvpanchal]

Flexbox is partially supported on IE11. Please check http://caniuse.com/#feat=flexbox

[soniapello]

This issue is related to this one which is closed but the pb still exist

[soniapello]

The only way I found to make it work in ie 11 is to add a height : 100%

[dmatranga]

Still experiencing issues with this in IE 11. Image is correct height in Chrome but appears stretched in IE 11.

[floscher]

I was able to fix this by applying display:block to the <div>s with class card, after @AdelElkhodary mentioned this solution in #21885.

[kaburkett]

Adding @soniapello recommended 100% height onto the image was an acceptable workaround for us:

<img class="card-img h-100" src="https://dummyimage.com/960x466/A51E36/fff" alt="test image">

[jonnysp]

@mdo min-height: 0.01px work also can you add to reboot?

* {
   min-height: 0.01px;
}

jonny

[matejkramny]

overflow: hidden; on the parent container is another solution

[jackhwelch]

I am very new to web development and am having the same issue... My page loads perfectly on Chrome and Safari, but my images within cards are stretched when opened in Internet Explorer. Does anyone have a solution? I am already using img h-100 but still no luck.

[jackhwelch]

no problem i fixed it with

<div class="mh-100vh">

[bluntfest]

This is my first post so my apologies if I am not responding correctly.

Not sure if this will help or not, but I just spent some time playing around and I think I've got my page displaying the same on all 3 browsers I am testing (IE11, Chrome & Firefox (both latest versions)).

I was using h-100 inside the card-img-top like so: <img class="card-img-top h-100"
to fix the tall images in IE11, worked like a charm.

But of course after I did this, Chrome decided it wanted to look like IE11 did before I added h-100, thus defeating the purpose of using h-100 to fix the IE11 issue because now the issue was replicated in Chrome.

I ended up removing the h-100 and setting a custom height in my custom styles.css file for the card-img-top... .card-img-top { height: 300px; } was mine.

Now all 3 browsers are showing the images as the same height. It worked for me as all my images get resized to 500px by 500px so showing them as 300px in the listing is no big deal (may not work for people who have varying dimensions).

Hope this helps someone.

[dmatranga]

Ok so I think I found a solution that renders the correct height in both IE 11+ and Chrome. In my web app, I was trying to make a grid of cards in 2 columns.

For the first row, here's what I came up with. I only included markup for the first card in the first column, but you should get the idea:

<div class="row">
    <div class="card-deck col-sm-12">
        <!-- INDIVIDUAL APP CARD -->
        <div class="col-sm-6">
            <div class="card">
                <div class="h-100">
                    <a class="card-link text-dark" href="#">
                                    <img class="card-img-top img-fluid" src="#" alt="Card image cap">
                                    <div class="card-body">
                                        <h4 class="card-title">Card Title</h4>
                                        <p class="card-text">Some text up in here.</p>
                                    </div>
                                    <!-- card-body -->
                                </a>
                    <!-- END card-link -->
                </div>
                <!-- h-100 -->
            </div>
            <!-- END card -->
        </div>
        <!-- END col-sm-6 -->
        <!-- END OF INDIVIDUAL APP CARD -->
    </div>
    <!-- card-deck col-sm-12 -->
</div>
<!-- row -->

[mnswiftone]

Tried the div class="h-100" mentioned above - did not work in IE11 for me.
I have had to add "style="min-width:XXXpx;" to many bootstrap col-xx divs to prevent them from shrinking smaller than the components within - and so I thought - maybe force the size of the container to match the image size.

This worked for me:

<div class="card m-3"> 
    <div style="width:200px; height:57px;">                   
          <img class="card-img-top" src="../Agent/images/Site.jpg" 
                   width="200px" height="57px" alt="Site logo">/img>
    </div>
    <div class="card-header">Title</div>
    <div class="card-header">....</div>
</div>

[ianastewart]

There is still a bug with IE11 when an image is specified with w-100 and its native width is greater than the width of the card. The image gets stretched vertically. Adding style="flex: 0 0 auto;" fixes it.