Dieses Tutorial soll Ihnen verschiedene Möglichkeiten erklären, wie Sie Ihren mobilen Hintergrund je nach Ihren Bedürfnissen anpassen können.
Den Hintergrund für mobile Geräte anpassen
Tutorial Nr. 1
Ziel: Das Bild behält immer dieselbe Höhe, unabhängig von der Größe des Smartphones. Es wird Abstand zwischen den rechten und linken Bildschirmrändern und dem Bild geben. (Bezieht sich auf die Vorschau auf iPhone 5, Galaxy S6-S20/ Huawei P9-P40, iPhone XS Max/XR/11/11 Pro Max.)
Im Container-Bereich: Belassen Sie die Breite des Containers bei 100%. Ändern Sie nicht die zuvor im Desktop festgelegte Höhe (in diesem Fall 320px), sie wird automatisch für mobile Geräte übernommen. Somit nimmt der Hintergrund-Container die gesamte Breite des Smartphones mit einer festen Höhe von 320 Pixeln ein.
Hintergrundbild-Einstellungen: Für die Breite des Bildes wählen Sie "auto" und für die Höhe 100%. Das Hintergrundbild nimmt immer die volle Höhe des Anzeigebereichs ein, also 320 Pixel. Da die Breite auf "auto" gesetzt ist, wird das Bild nicht verzerrt und behält seine Proportionen bei.
Tutorial Nr. 2
Ziel: Das Bild passt sich an die Breite des Bildschirms an und nimmt daher in der Höhe zu. (Bezieht sich auf die Vorschau auf iPhone 5, Galaxy S6-S20/ Huawei P9-P40, iPhone XS Max/XR/11/11 Pro Max.)
Im Container-Bereich: Belassen Sie die Breite des Containers bei 100%. Ändern Sie nicht die zuvor im Desktop festgelegte Höhe (in diesem Fall 320px), sie wird automatisch für mobile Geräte übernommen. Somit nimmt der Hintergrund-Container die gesamte Breite des Smartphones mit einer festen Höhe von 320 Pixeln ein.
Hintergrundbild-Einstellungen: Geben Sie 100% für die Breite des Bildes ein, und wählen Sie "auto" für die Höhe des Bildes.
So nimmt das Hintergrundbild immer die volle Breite des Smartphone-Bildschirms ein. Da die Höhe des Bildes auf "auto" steht, wird das Bild nicht verzerrt und die Proportionen bleiben erhalten.
Da der Anzeigebereich in Pixeln angegeben ist, wird das Bild unten abgeschnitten, wenn die Höhe 320 Pixel überschreitet.
Tutorial Nr. 3
Ziel: Das Bild wird zu 50% oben und zu 50% unten abgeschnitten. (Bezieht sich auf die Vorschau auf iPhone 5, Galaxy S6-S20/ Huawei P9-P40, iPhone XS Max/XR/11/11 Pro Max.)
Im Container-Bereich: Die Einstellungen sind dieselben wie im vorherigen Tutorial.
Hintergrundbild-Einstellungen: Geben Sie für die Bildbreite 100% ein, die Bildhöhe wird auf "auto" gesetzt, und geben Sie 50% in das Feld für die vertikale Position ein.
Tutorial Nr. 4
Ziel: Das Bild wird oben abgeschnitten. (Bezieht sich auf die Vorschau auf iPhone 5, Galaxy S6-S20/ Huawei P9-P40, iPhone XS Max/XR/11/11 Pro Max.)
Im Container-Bereich: Die Einstellungen sind dieselben wie in den vorherigen Tutorials.
Hintergrundbild-Einstellungen: Geben Sie für die Breite des Bildes 100% ein, die Höhe des Bildes wird auf "auto" gesetzt, und geben Sie 100% in das Feld für die vertikale Position ein.
Tutorial Nr. 5
Ziel: Das Bild wird nicht abgeschnitten und der Anzeigebereich passt sich an das Bild an und nicht umgekehrt. (Bezieht sich auf die Vorschau auf iPhone 5, Galaxy S6-S20/ Huawei P9-P40, iPhone XS Max/XR/11/11 Pro Max.)
Im Container-Bereich: Belassen Sie die Breite des Containers bei 100%, setzen Sie aber die Höhe auf 0 Pixel.
Hintergrundbild-Einstellungen: Geben Sie für die Breite des Bildes 100% ein und wählen Sie für die Höhe des Bildes "auto".
Positionseinstellung: Tragen Sie dieselben Werte in den oberen und unteren Positionen ein, um das vollständige Bild im Designer anzuzeigen.
Diese Tutorials sind Beispiele für optionale Anpassungen. Jeder Hintergrund hat seine eigenen Einstellungen, abhängig von Ihrem endgültigen Ziel.