Hallo zusammen,

ich hbe eauf meiner Seite einige Bilder, die mit eine max-width von 100% dafür sorgen, dass es auch mobil gut aussieht.

Nun ist es so dass durch die Ladezeiten der Bilder ein Cumulative Layout Shift entsteht den ich verhindern will.

Normalerweise geht das ganzeinfach, indem ich ein <div> um das Element baue und dem Div die entsprechende Höhe des fertig geladneen Inhalts gebe.

Nun ist die Höhe der Bilder aber nicht klar, sondern abhängig von der Breite des Bildschirms, bzw des Divs in dem sie sind.

Da die Bilder alle gleich sind, und somit auch der Aspekt zwischen Höhe und breite immer gleich ist, könnte ich - falls es das gibt - dies lösen indem ich die height abhängig von der aktuellen width festlege. Also z.b. height: 0,75*[aktuelle witdh dieses Elements].

Kann CSS sowas oder muss das zwingend mit JS gemacht werden, worauf ich gerne verzhten würde.

Danke für eure Mühe,

kanuddel

Das lässt sich zumindest mit CSS tricksen. Das Padding eines Elements kannst du in Prozent angeben, dann bezieht sich dieser Wert auf die Breite des Elements selbst. Für ein Seitenverhältnis von 16:9 wäre das zum Beispiel ein padding-top: 56.25%;, die Höhe muss auf 0 gesetzt werden.

Das Bild selbst kannst du dann entweder als Hintergrundbild setzen oder absolut auf dem umgebenden Element (mit dem Padding) positionieren.

Vielen Dank! Ich habs damit hinbekommen!

Für die Nachwelt, die vor dem gleichen Problem stehen, hier meine Umsetzung die funktioniert:

Vorher:
Nachher:
und
Padding Top ist dabei wie beschrieben die Ratio zwischen Höhe und Breite. Mein Bild ist 695*444px, somit 63.88%

Nachteil der Lösung ist nur dass es jetzt kein Bild mehr ist sondern nur ein Hintergrund (Schmuckbild). Screenreader sagen an der Stelle dem Nutzer nicht, dass hier ein Bild ist und was darauf zu sehen ist.

Das ließe sich mit Hilfe von object-fit auch mit einem img-Element umsetzen. Zum Beispiel das Padding auf ein umschließendes Element legen und das img darüber positionieren.