Sztuczka CSS, aby łatwo wyrównać różne obrazy bez zniekształceń

W wielu przypadkach okazuje się, że musimy prezentować bardzo różne obrazy w uporządkowany sposób, więc chcemy je wyrównać w poziomie i pionie.

Jaki jest problem? Że jeśli wymusimy stałą szerokość i wysokość, obrazy są zniekształcone, jeśli mają różne proporcje.

Oto samouczek wideo:

Wyobraźmy sobie, że mamy następujące obrazy, które chcemy wyrównać:

Jeśli zmienimy szerokość i wysokość na 100px, otrzymamy następujący zniekształcony wynik:

img {
    height: 100px;
    width: 100px;
}

Ale jeśli dodamy właściwość dopasowania obiektu do CSS:

img {
    height: 100px;
    width: 100px;
    object-fit: cover;
}

Rezultatem będzie:

Uwierz mi, ten mały kod może uchronić Cię od wielu kłopotów 😉