Die Größe eines Bildes so ändern, dass es ohne Verzerrung in das Browserfenster passt

Die Größe eines Bildes so zu ändern, dass es in ein Browserfenster passt, ist eine häufige Aufgabe mit scheinbar einfachen Lösungen. Allerdings kann die Einhaltung spezifischer Anforderungen, wie etwa die Wahrung von Proportionen und die Vermeidung von Beschnitten, eine Herausforderung darstellen.

Lösung ohne Scrollbars und Javascript (nur CSS)

Diese Lösung verwendet CSS Grid, um sicherzustellen, dass der Bildcontainer die gesamte Fensterhöhe einnimmt. Das Bild wird dann so eingestellt, dass es horizontal und vertikal in diesen Container passt, wobei sein Seitenverhältnis erhalten bleibt und das Hinzufügen von Bildlaufleisten vermieden wird.

Lösung mit JQuery

Wenn Javascript verfügbar ist , ein anderer Ansatz ist:

Hier wird die Körperhöhe so eingestellt, dass sie mit der Fensterhöhe übereinstimmt, um sicherzustellen, dass die Max-Height-Eigenschaft des Bildes korrekt funktioniert. Das Fenstergrößenänderungsereignis wird auch verarbeitet, um die Körperhöhe und die Bildgröße automatisch anzupassen, wenn die Fenstergröße geändert wird.