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

[PoisonSin]

When you use an image with class 'img-fluid' within a 'card', the width is correct but the height is the original height of the image.

https://jsfiddle.net/6Lef7tzo/

This happens because the card has now the style 'display: flex'. If i style the card with 'display: block' everthing works fine!

Bootstrap 4 Alpha 6

Chrome + Firefox OK!
IE 11 = bug

[gilronc]

I've also noticed this issue after upgrading to alpha 6. I've only tested and confirmed it on IE11 - Windows 7. Chrome and Firefox worked as expected. Removing display:flex and reverting to the Alpha 5 cards solves this issue for me.

[erkstruwe]

Possibly related to #22020 and #21650. I also get distorted images in Chrome for Alpha 6 cards, if the card is wider than the natural width of the image. Then the image is displayed in the width of the card, but display height is stuck at the image's natural height.

Minimal example:

    <div class="card mb-3" style="width: 300px;">
      <img class="card-img-top" src="https://tiny.pictures/api/demo/main/example1.jpg?width=400" alt="Card image cap">
      <div class="card-block">
        <p class="card-text">card width: 300px<br>natural image width: 400px<br>ok</p>
      </div>
    </div>

    <div class="card mb-3" style="width: 300px;">
      <img class="card-img-top" src="https://tiny.pictures/api/demo/main/example1.jpg?width=200" alt="Card image cap">
      <div class="card-block">
        <p class="card-text">card width: 300px<br>natural image width: 200px<br>distorted</p>
      </div>
    </div>

[K1N5L4Y3R]

Having the same issue

[rootor-eu]

Having same issue / Safari 10
Try to use auto on the dimension that should respect the aspect ratio:

.card-img-top {
min-width: 100%;
width: auto;
height: auto;
}

[mdo]

Fix coming in #22288

[vdrnn]

@mdo seems like the problem still exists for IE11: https://cl.ly/2d0H281R1904

[buglist3r]

@mdo the problem still exists in IE11 its only works when i give the card display block

[skunkbad]

@mdo this still happening with bootstrap 4 beta. Also a problem when img-fluid used directly inside .col

[jonatanjohnsson]

Indeed, still an issue with v.4 Beta. The fix with display: block on normal cards is a workaround, but that doesn't fix the card decks/card groups as it would break the flexbox row.

[kaburkett]

Has anyone found a temporary work around to create a successful flexbox with cards in IE? :pray: :pray: :pray:

[kaburkett]

The linked ticket above provided a workaround:

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

[yangjindong]

@kaburkett The 'h-100' class works great fine!
https://jsfiddle.net/nivta/p3cjxt3k/1/
But we can add this class to the parent node of the fluid image.

[jonnysp]

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

* {
   min-height: 0.01px;
}

jonny

[mdo]

A universal selector like that won't be going in Reboot, sorry. That's way too general.

[jonnysp]

i have the issue on ie11 with images in cards and modals. width the prop on reboot is it fixed.
*, *::before, *::after { box-sizing: border-box; // 1 min-height: .01px; }

maybe you can add the min height to modals and cards.
https://jsfiddle.net/jonnysp/12024z4k/

[OmarHegazi94]

the solution is to define a certain height to the image

[delnaz]

Is the issue with the image height for IE 11 fixed in the latest bootstrap 4 ?

I'm still getting this issue.

[grahamlander]

I am trying to solve a problem that might be the same or related, may I show a bootply?https://www.bootply.com/0GKtAaQrCt

I was able to keep my image size correct, but all the card heights are stretched to the max of the images height even when they images is tiny on a wide browser view. This only happens in IE, no problem in all the other browsers.

If I apply display:block to the card (using my .cardt class) it fixes the height of the card but I lose vertical centering.
EDIT:
Solved my problem by adding h-100 to my card body as well as the card, dropped the display:block from the card and it still worked for ie11 but messes up safari 9 and 10 boxes terribly, 11 is good.
https://www.bootply.com/vRYNMCZTZk

[bluntfest]

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.

[alanmarchman]

@jonnysp 's solution worked for me.

[jeroendesloovere]

I used the class d-block instead of h-100 to fix this.
Example <div class="card d-block">

[updtr-de]

I'm sure ttis is not the "right" way to go, but this is how it worked for me:
https://www.bootply.com/20bzGOAzfZ#
I used https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection to identify internet explorer and added a special class h-100-ie to the image.

[Inawire]

Using this tip: https://stackoverflow.com/questions/36822370/flexbox-on-ie11-image-stretched-for-no-reason

we enhanced the bootstrap 4 css class: .card-img-top with...

.card-img-top {
     max-width: 100%
     flex-shrink: 0;
}

This fixed our issue in IE 11 and did not break Firefox, Chrome or Edge (not sure on Safari yet until I get home)