CSS: Bilder mit object-fit croppen und skalieren

Für CSS background-images gibt es schon lange die beliebte und weit verbreitete Möglichkeit, das Hintergrundbild eines Elementes so zu beschneiden und skalieren, dass es seine ursprüngliche Proportionen behält und nicht verzerrt wird. Gleiches war lange nicht ohne weiteres für Bilder möglich, die direkt über den <img>-Tag eingebunden werden. Wenn man hier eine feste Höhe und Breite angibt, die nicht den Originalproportionen enstsprechen, wird das Bild verzerrt. Hier schafft die object-fit-Property Abhilfe. Mit object-fit lassen sich Bilder genau wie Hintergrundbilder mit folgenden Werten croppen:

• fill: Standardverhalten (verzerrt)
• contain: Das Bild wird mit den richtigen Proportionen so verkleinert (oder vergrößert), dass es vollständig in das Element passt
• cover: Das Bild wird mit den richtigen Proportionen so in der Größe angepasst, dass es das Element vollständig abdeckt. Hierbei kann es beschnitten werden
• none: Die Größe des Bildes wird nicht angepasst

Am meisten Verwendung finden hier wohl, wie bei background-images auch, die Werte contain und cover.

Alle Werte zum Anschauen in einem CodePen:

(codepen: http://codepen.io/czehnter/pen/ZBOJPa)