Different-sized images destroying your card grid? Two properties fix it permanently.
The fix
.card img {
width: 100%;
aspect-ratio: 16 / 9; /* every image box identical */
object-fit: cover; /* fill the box, crop overflow — NO distortion */
}The object-fit options
- cover — fill completely, crop edges (product cards, avatars, heroes)
- contain — fit entirely inside, letterbox gaps (logos, diagrams)
- fill — stretch to fit (the ugly default)
- none / scale-down — natural size / smaller of none-vs-contain
Control the crop
object-position: top; /* keep faces when cropping portraits */ object-position: 20% 50%;
Avatar recipe: width: 48px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; — perfect circles from any source image. Works on <video> too.