https://davidbullock.github.io/responsive-aspect-ratio-cards/
Simple cards with responsive, fixed aspect ratio images. Aspect ratio is set on image container. “Object-fit: cover“ is used with images of unknown dimensions, a basic CSS only fallback is used for IE9+.
There are a couple of useful aspect ratios in the list of variables, these essentially form a fraction for the image container.
Consider object-fit polyfil solutions for IE.
| IE9 | IE10 | IE11 | Chrome | Opera | Firefox | Safari | Chrome (Android) | Mobile Safari |
|---|---|---|---|---|---|---|---|---|
| B | B | B | A | A | A | A | A | A |