0Responsive Hintergrundbilder für Websites

Ich habe vor kurzem meine Websites und Web-Server und das Hinzufügen einer neuen Website wurde die Aktualisierung (LoveCrete.org). Ich wollte ein Hintergrundbild auf LoveCrete haben und erkennen, dass natürlich 1 Größe passt nicht alle Bildschirme. Hier ist eine Zusammenfassung meiner Gedanken und meiner Maßnahmen zur Berücksichtigung der zahlreichen Bildschirmgrößen und -ausrichtungen.

welche Orientierung

Ich begann damit, mir eine kleine Tabelle mit allen gängigen Auflösungen zu erstellen PCs und Tabletten (in horizontaler Ausrichtung). Ich habe mich darauf konzentriert, da die meisten Bilder im Querformat verfügbar sind. Dies ist also ein sinnvoller Ausgangspunkt.

Ich beschloss, Bilder zentral auf der Seite zu platzieren und in einigen Fällen die Kanten vom Bildschirmrand zu verlieren. Wenn ein Telefon im Hochformat verwendet wird, wird das Bild basierend auf der Höhe geladen (nicht Breite) und wird eine Menge von beiden Rand des Bildes verlieren. Wenn Sie es anders machen, müssen Sie Bilder in eine völlig andere Form zuschneiden oder ein Landschaftsbild auf einem großen Bildschirm „kacheln“, was nicht erwünscht ist.

Die Verhältnisse des Bildes mit maximaler Größe in jeder Gruppe waren überall 1.6 mit ein paar etwas höher. Um die Dinge einfacher zu halten, habe ich mich für ein Verhältnis von entschieden 16:10 für alle Bilder und kam mit Größen bis zu entsprechend machen.

Dies bedeutet, dass das Bild in den meisten Fällen nicht perfekt zur Bildschirmgröße passt, Aber alle Bildschirme werden etwas sehr Nahes bekommen und kein Bildschirm wird etwas zu Kleines haben. Es bedeutet auch, ein Quellbild kann beschnitten werden 16:10 einmal und dann mehrere Größen leicht erstellt

Gemeinsame Landschaft Auflösung Gruppen

Wie Sie sehen, habe ich einige Vorsätze zusammengefasst und werde sie dann treffen 1 Bild, das alle Höhen bis zur größten Höhe in dieser Gruppe abdeckt. Ich werde sicherstellen, dass das Bild auch breit genug für die maximale Breite ist, mit der eine solche Höhe auf einem normalen Bildschirm gepaart werden kann. Ich habe ungewöhnliche Konfigurationen wie nicht berücksichtigt 21:9 Monitore oder mehrere Bildschirme - irgendwo muss es eine Grenze geben!

weil CSS Verwendet das Ansichtsfenster oder die Browsergröße und nicht die Bildschirmgröße. Querformat-Bildschirme müssen eher die Breite als die Höhe verwenden. Wie bei den meisten Systemen verlieren die oberen und unteren Bereiche Platz für Titelleisten usw., während die Breite normalerweise maximiert wird. Jedoch, Für Porträtanzeigen ist es besser, die Eigenschaft height zu verwenden. Dies kann als getan werden CSS kann die Bildschirmausrichtung identifizieren

Die CSS verwendet sieht dann wie folgt

Körper{Hintergrund Wiederholung: no-repeat; background-attachment: fest; background-position: mitte; Hintergrund-Größe: Startseite;}

@Medien (maximale Breite: 768px) {Körper { Hintergrundbild: url(bg480.jpg); }}
@Medien (min-width:769px) und (maximale Breite: 1024px) {Körper { Hintergrundbild: url(bg640.jpg); }}
@Medien (min-width:1025px) und (maximale Breite: 1280px) {Körper { Hintergrundbild: url(bg800.jpg); }}
@Medien (min-width:1281px) und (maximale Breite: 1600px) {Körper { Hintergrundbild: url(bg1000.jpg); }}
@Medien (min-width:1601px) und (maximale Breite: 1920px) {Körper { Hintergrundbild: url(bg1200.jpg); }}
@Medien (min-width:1921px) und (maximale Breite: 2560px) {Körper { Hintergrundbild: url(bg1600.jpg); }}
@Medien (min-width:2561px) {Körper { Hintergrundbild: url(../images / bg2400.jpg); }}

@Medien (Orientierung: Porträt){
@Medien (maximale Höhe: 480px) {Körper { Hintergrundbild: url(bg480.jpg); }}
@Medien (min-height:481px) und (maximale Höhe: 640px) {Körper { Hintergrundbild: url(bg640.jpg); }}
@Medien (min-height:641px) und (maximale Höhe: 800px) {Körper { Hintergrundbild: url(bg800.jpg); }}
@Medien (min-height:801px) und (maximale Höhe: 1000px) {Körper { Hintergrundbild: url(bg1000.jpg); }}
@Medien (min-height:1001px) und (maximale Höhe: 1200px) {Körper { Hintergrundbild: url(bg1200.jpg); }}
@Medien (min-height:1201px) und (maximale Höhe: 1600px) {Körper { Hintergrundbild: url(bg1600.jpg); }}
@Medien (min-height:1601px) {Körper { Hintergrundbild: url(bg2400.jpg); }}
}