Mittels der CSS Eigenschaft object-fit lassen sich Bilder in einem Container ähnlich anzeigen, wie es mit Hintergrundbildern möglich ist.
Man hat die Möglichkeit dass bei einem ungleichen Seitenverhältnis und Größe des Containers des Bildes zu bestimmen, ob das Bild skaliert, verzerrt oder etwas abgeschnitten wird.
Das ist das Original Bild ist 400x200 Pixel Der Grid Container 200x300 Pixel. Das Bild hat eine Breite und Höhe von 100%.
Das Bild behält sein Seitenverhältnis und wird in Breite oder Höhe so angepasst, dass es komplett zu sehen ist.
Das Bild füllt den Container aus, das Seitenverhältnis bleibt erhalten aber es wird etwas abgeschnitten, wenn nötig.
Das Bild wird nicht skaliert, aber es wird etwas abgeschnitten, wenn es nicht passt.
Der Inhalt wird in der Größe geändert als ob none oder contain angegeben wäre, je nachdem welches in einer kleineren konkreten Objektgröße resultieren würde.