Farklı görüntüleri bozulma olmadan kolayca hizalamak için CSS hilesi

Birçok durumda, çok farklı görüntüleri düzenli bir şekilde sunmamız gerektiğini görüyoruz, bu yüzden onları yatay ve dikey olarak hizalamak istiyoruz.

Sorun nedir? Sabit bir genişlik ve yüksekliği zorlarsak, görüntüler farklı bir orandaysa bozulur.

İşte video eğitimi:

Hizalamak istediğimiz aşağıdaki resimlere sahip olduğumuzu düşünelim:

Genişliği ve yüksekliği 100 piksel olarak değiştirirsek, aşağıdaki çarpık sonucu alırız:

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

Ancak, CSS'ye object-fit özelliğini eklersek:

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

Sonuç:

İnanın bu küçük kod sizi bir çok dertten kurtarabilir 😉