Im Gegensatz zu vielen Leuten, die wollen, dass ein Bild den ganzen Bildschirm ausfüllt, interessiert mich nur die Bildhöhe. Wie kann ich CSS (vorzugsweise JavasScript) verwenden, um ein Bild mit beliebiger Größe zu erstellen, füllen Sie bis zu 100% des maximal möglichen Browserfensters height , während Sie das Seitenverhältnis des Bildes beibehalten Das Bild in Bezug auf den Browser spielt keine Rolle.
Ich arbeite mit diesem HTML:
%Vor%Vielen Dank!
oder wenn Sie explizit sein möchten
%Vor% Höhe 100%: Ссылка
Breite 100%: Ссылка
BEARBEITEN:
Diese Antwort brauchte etwas Aufmerksamkeit. Die Demo war kaputt und generell unordentlich. Ich habe es mit neuen Bildern aktualisiert, Regel aktualisiert, um die Inline-Art von Bildern zu kompensieren, und Höhe und Breite des Body- und HTML-Elements normalisiert.
Sie können sich auch die CSS-Einheiten vh, vw, vmin und vmax ansehen, die ziemlich gut unterstützt werden . Es gibt einen guten Artikel, der beschreibt, wie man 100% Höhe erreicht hier .
BTW - Vorsicht vor Leerzeichen: Dies kann eine unerwünschte Marge hinzufügen. Das Entfernen des Speicherplatzes, das Hinzufügen eines Gleitkommas oder das Verwenden des font-size: 0 -Hacks wird dies beheben. Beachten Sie auch, wenn Sie andere Methoden verwenden, height: 100% für die Elemente body und html festzulegen.