Seitenverhältnis
Eine feste Höhe funktioniert, nimmt aber keine Rücksicht auf die Breite: In einer breiten Karte ist ein 192 Pixel hohes Bild ein flacher Streifen, in einer schmalen fast ein Quadrat. Unsere Karte ist nie breiter als 24rem (max-w-sm), aber Bilder an anderen Stellen einer Website, zum Beispiel über die ganze Seite, ändern ihre Breite stark. Deshalb ist es oft besser, einem Bild eine Form zu geben: ein Seitenverhältnis, das Verhältnis von Breite zu Höhe. Das macht die CSS-Eigenschaft aspect-ratio, und der Browser berechnet dann die Höhe aus der Breite:
aspect-ratio: 16 / 9; /* 16 Teile breit, 9 Teile hoch */| Klasse | CSS | Form |
|---|---|---|
aspect-square | aspect-ratio: 1 / 1; | ein Quadrat |
aspect-video | aspect-ratio: 16 / 9; | ein Video oder ein Fernsehbildschirm |
aspect-4/3 | aspect-ratio: 4 / 3; | jedes Verhältnis, als Bruch geschrieben |
aspect-auto | aspect-ratio: auto; | das eigene Verhältnis des Elements |
Damit ein Seitenverhältnis wirkt, dürfen am Element nicht Breite und Höhe zugleich festgelegt sein: Eines von beiden ist vorgegeben (hier die Breite, w-full), und das Seitenverhältnis berechnet das andere. Wenn du h-48 am Bild lässt, wird das Seitenverhältnis ignoriert.
Zusammen mit object-cover kannst du jedem Foto die gewünschte Form geben, ohne es zu verzerren. Deshalb siehst du an Bildern oft dieses Trio von Klassen: w-full aspect-video object-cover.
So schreibst du es:
Anweisungen
- 1
Ersetze an Oskars Bild die Klasse
h-48durchaspect-video. Das Bild hat jetzt immer die Form eines Videos, 16 : 9. (Probiere auchaspect-squareaus und gehe dann zurück zuaspect-video.)