CSS-Trick zum einfachen Ausrichten verschiedener Bilder ohne Verzerrung

von

Bei vielen Gelegenheiten stellen wir fest, dass wir sehr unterschiedliche Bilder geordnet präsentieren müssen, also möchten wir sie horizontal und vertikal ausrichten.

Was ist das Problem? Dass, wenn wir eine feste Breite und Höhe erzwingen, die Bilder verzerrt werden, wenn sie andere Proportionen haben.

Hier ist das Video-Tutorial:

Suscríbete a mi Kanal:  

Stellen wir uns vor, wir haben die folgenden Bilder, die wir ausrichten möchten:

verschiedene Bilder

Wenn wir die Breite und Höhe auf 100 Pixel ändern, erhalten wir das folgende verzerrte Ergebnis:

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

verzerrte Bilder

Aber wenn wir die Eigenschaft object-fit zum CSS hinzufügen:

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

Das Ergebnis wird sein:

unverzerrte Bilder

Glauben Sie mir, dieser kleine Code kann Ihnen viel Ärger ersparen 😉

Hinterlassen Sie einen Kommentar