Images in card columns do not scale well

[mrkkrp]

When using card-columns with images, the images do not seem to scale well. Here I attach a complete reproducing example which you can just open in your browser and see.

bad-cards.txt

(Change extension from txt to html because GitHub wouldn't allow me to put HTML doc here.)

The example is composed as per your v4 docs, as combination of the “starter example” and the example code for the card-columns feature. For image placeholders I used https://placehold.it service.

I checked with Firefox and Chromum, and got the same results:

With every zoom value imaginable images look wrong. (Also note the ugly corner.)

Maybe I don't understand something and the images are not supposed to scale and look well?

[thomashare]

Yes, card images should take in the img-fluid class settings.

[mdo]

I'll take a look at this a bit more, but you can fix it by adding .img-fluid to the .card-img-* elements. I'll likely update the docs to include those classes rather than mixin/extend the class into the .card- component itself (to avoid duplication of code).

As for the corner, that's a rounding problem on our part. We need to subtract the 1px border from the border-radius: .25rem, which means pulling out calc.

All doable and fixable, but wanted to explain the problem ahead of me opening a PR to fix :).

[mrkkrp]

Thanks!