Feature update for the class card-img-overlay

[munsheerek]

Its a suggestion to fix the content overflowing inside the card having image overlay (https://getbootstrap.com/docs/4.1/components/card/#image-overlays).

• At the moment,if we add more content inside .card-img-overlay class,the overlay will be broken.
  Because here the image has relative height so it would take image height.it would be nice if we give the height of the card as i mentioned in the codepen, and also give a minimum height that of image height so that we can't lose the image into smaller one.
  I will add a CodePen link with fixing the issue.I think it won't might affect other elements.
  Here's the link : https://codepen.io/munsheerek/pen/aaLgWy
  Why can you try out this method ?

[andresgalante]

Hi @munsheerek

You are right, the overflow on image overlay is something is a known limitation of the overlay. Your solution is really interesting and it does solve it at the price of cropping the image.

Unfornutaly object-fit is not supported by IE11: https://caniuse.com/#feat=object-fit

I'll tag this issue as an idea for v5 in case we drop IE11 support.

Having said this, I think the documentation is not clear about the limitation on the image overlay: https://getbootstrap.com/docs/4.1/components/card/#image-overlays

If you'd like to fix that it'd be awesome :)

[mdo]

Closing since a docs change was merged, and this isn't doable in v4.