0HTML5 LogoResponsive 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 dessen, was mein Denken war und was ich tat, gerecht zu werden für die zahlreichen Bildschirmgrößen und Ausrichtungen.

welche Orientierung

I star­ted by mak­ing myself a little table of all the com­mon res­ol­u­tions used on PCs and tab­lets (in hori­zont­al ori­ent­a­tion). I decided to focus on this because most images are avail­able in land­scape so this is a sens­ible place to start.

I decided that I would place images cent­rally on the page and let the edges be lost off the edge of the screen in some instances. When a phone is used in por­trait ori­ent­a­tion it will load the image based on height (nicht Breite) und wird eine Menge von beiden Rand des Bildes verlieren. Doing it any oth­er way would mean need­ing images cropped to a totally dif­fer­ent shape or hav­ing a land­scape image “tile” on a tall screen, which is not desir­able.

The ratios of the max­im­um size image to make in each group were all around 1.6 with a few a bit high­er. To keep things sim­pler I decided to use a ratio of 16:10 for all images and came up with sizes to make accord­ingly.

This means in most cases the image will not be a per­fect fit to the screen size, but all screens will get some­thing very close and no screen will end up with some­thing too small. Es bedeutet auch, ein Quellbild kann beschnitten werden 16:10 once and then mul­tiple sizes eas­ily cre­ated

Gemeinsame Landschaft Auflösung Gruppen

HöheBreiteBild zu machenCom-gen
4:316:1016:9
2160288038402400×38404k UHD
1600
1536
1440
-
2048
1920
2560
-
-
-
-
2560
1600×2560
1200
1080
1050
1600
1440
1400
1920
-
1680
-
1920
-
1200×1920Full HD 1080p
960
900
1280
1200
1536
1440
-
1600
1000×1600
800
768
720
-
1024
960
1280
-
-
-
-
1280
800× 1280720p
600
576
800
768
960
-
-
1024
640×1024
480640768480×768

As you can see I have grouped quite a few res­ol­u­tions and will then make 1 image that will cov­er all heights up to the largest height in that group. I will make sure the image is also wide enough for the max­im­um width such a height might be paired with on a nor­mal screen. I haven’t taken account of unusu­al con­fig­ur­a­tions like 21:9 mon­it­ors or mul­tiple screens — there has to be a lim­it some­where!

weil CSS uses the view­port or browser size and not the screen size land­scape screens need to use width rather than height — as on most sys­tems the top and bot­tom lose space to title bars etc whilst the width is usu­ally max­im­ised. Allerdings, for por­trait dis­plays it is bet­ter to use the height prop­erty. Dies kann als getan werden CSS can identi­fy the screen ori­ent­a­tion

Die CSS used then looks as fol­lows

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); }}
}

Bitte senden Sie uns Ihre Gedanken durch Kommentierung unten! Wenn Sie bitte abonnieren möchten den Link oben rechts auf dem Menü abonnieren verwenden. Sie können auch unten unter Verwendung der sozialen Bindungen diese mit Ihren Freunden teilen. Prost.

Hinterlasse eine Antwort