Bilder

Sehen wir uns nun Oskars Bild an. Es hat noch keine Klasse und passt trotzdem schön in die Karte. Das ist wieder Preflight. Es gibt allen Bildern diese Stile:

img {
	display: block;
	max-width: 100%;
	height: auto;
}

• display: block: Das Bild ist ein Block und steht in einer eigenen Zeile. Ohne das zeigt ein Browser ein Bild inline an, wie ein Wort in einem Satz, und lässt darunter eine kleine Lücke.
• max-width: 100%: Das Bild ist nie breiter als sein Elternelement. Unser Bild ist 600 Pixel breit, schrumpft aber auf die Breite der Karte.
• height: auto: Die Höhe folgt der Breite, das Bild behält also sein Seitenverhältnis (seine Form: wie oft es breiter als hoch ist) und wird nicht verzerrt.

Karten auf einer Website haben aber meist Bilder derselben Höhe, egal welche Form die Fotos haben. Wenn du Breite und Höhe eines Bildes festlegst, hat seine Box eine andere Form als das Bild selbst, und die CSS-Eigenschaft object-fit bestimmt, wie das Bild sie füllt:

Hier ist Oskars Bild in einer Box, die doppelt so breit wie hoch ist (die gestrichelte Linie):

object-fill

object-cover

object-contain

Meistens willst du object-cover: Die Box ist gefüllt, und die Katze sieht nicht gequetscht aus. Probieren wir es Schritt für Schritt.