CSS object-fit

Die CSS-Eigenschaft <object-fit> ermöglicht es, zu steuern, wie ein Bild oder Video in seinen Container passt. Das ist besonders wichtig, wenn die Größe des Elements von den ursprünglichen Proportionen abweicht.

Grundlagen von object-fit

Die Eigenschaft <object-fit> bestimmt, wie ein Bild in eine Box mit festgelegter Breite und Höhe passt. Die häufigsten Werte sind cover und contain.

Einfache Beispiele

Die folgenden Beispiele zeigen, wie sich dasselbe Bild mit verschiedenen object-fit-Werten verhält.

Vergleich von Cover und Contain

cover füllt den Container aus, indem es das Bild zuschneidet, während contain das gesamte Bild beibehält, aber möglicherweise leeren Raum im Container lässt.

Tipps zur Verwendung von object-fit

object-fit ist besonders nützlich im responsiven Design, aber man sollte auf die Benutzererfahrung achten.

• Verwende cover, wenn die visuelle Füllung am wichtigsten ist.
• Verwende contain, wenn das gesamte Bild erhalten bleiben soll.
• Teste die verschiedenen Einstellungen sowohl auf Mobilgeräten als auch auf Desktops, um die besten Ergebnisse zu erzielen.