Stop oversized images in .card-img-* from overflowing the card's boundaries

[simeon]

Images in cards using card-img-top or card-img-bottom via src="" (instead of data-src="") would overflow past the bounds of the card if the image width was too large. Now they will at most be equal to the width of the card.

[cvrebert]

FYI, data-src is a Holder.js-ism. The fact that data-src was ever shown in the docs code snippets was a bug (#18558).
So you're really just talking about oversized images in general.

[cvrebert]

Seems like it might be better to @include img-fluid instead, but I'm not too familiar with the Cards code.

[simeon]

@cvrebert I looked into it and you're right. Using @include img-fluid(block); would do the same job with a better "grammer". I've updated my commit to reflect that.

[cvrebert]

Have you tested this out when Flexbox is enabled ($enable-flex: true;)?

[simeon]

@cvrebert Yup, I just recompiled with Flexbox enabled and it's all good.

[cvrebert]

CC: @mdo for final review

[mkroeders]

Have this issue also, so to counter it I did an .img-fluid on the img, <img class="card-img-top img-fluid" src="..."/>. Which did not solve it for me, a width: 100% was needed for me.

I checked when you use $enable-flex: true; the width: 100% is needed otherwise the .img-fluid is enough.

[mdo]

This was addressed with the use of utilities in #20667, but I didn't check out the flex variation. If that's still a problem, can one of y'all open an issue with a test case that confirms that behavior? <3