Adapter l'arrière-plan en mobile

Ce tutoriel à pour but de vous expliquer différentes manières d'adapter votre arrière-plan en mobile en fonction de votre objectif.

Objectif : Le visuel conserve toujours la même hauteur, quelle que soit la taille du smartphone. Il y aura de l’espace entre les bords droit et gauche de l’écran et l’image. (Aperçu sur Iphone 5, Galaxy S6-S20/ Huawei P9-P40, Iphone XS Max/XR/11/11 Pro Max.)

Dans la zone du conteneur : Laissez la largeur du conteneur à 100%. Ne modifiez pas la hauteur précédemment déclarée en desktop (ici 407 px), elle est reprise automatiquement en mobile. Donc le conteneur d'arrière-plan occupera toute la largeur du smartphone avec une hauteur fixe de 407 pixels.

Paramétrage de l'image d'arrière-plan : Pour la largeur de l'image, cochez "auto", et pour la hauteur renseignez 100%. L’image d’arrière-plan prendra toujours toute la hauteur de la zone d’affichage, c’est-à-dire 407 pixels. La largeur étant définie en "auto", l’image ne sera pas déformée et conservera ses proportions.

Objectif : Le visuel s’adapte à la largeur de l’écran et augmente donc en hauteur. (Aperçu sur Iphone 5, Galaxy S6-S20/ Huawei P9-P40, Iphone XS Max/XR/11/11 Pro Max.)

Dans la zone du conteneur : Laissez la largeur du conteneur à 100%. Ne modifiez pas la hauteur précédemment déclarée en desktop (ici 515 px), elle est reprise automatiquement en mobile. Donc le conteneur d'arrière-plan occupera toute la largeur du smartphone avec une hauteur fixe de 515 pixels.

Paramétrage de l'image d'arrière-plan : Pour la largeur de l'image, renseignez 100%, et pour la hauteur de l'image, cochez "auto".

Alors l’image d’arrière-plan prendra toujours toute la largeur de l’écran du smartphone. La hauteur de l’image étant en auto, l’image ne sera pas déformée et ses proportions seront conservées.

Objectif : Le visuel est tronquée à 50% par le haut et à 50% par le bas.*

Dans la zone du conteneur : Les réglages sont identiques aux tutoriels précédents.

Paramétrage de l'image d'arrière-plan : Pour la largeur de l'image, renseignez 100%, hauteur de l'image en "auto" et renseignez 50% dans le champ position verticale.

Objectif : Le visuel est tronqué par le haut. (Aperçu sur Iphone 5, Galaxy S6-S20/ Huawei P9-P40, Iphone XS Max/XR/11/11 Pro Max.)

Dans la zone du conteneur : Les réglages sont identiques aux tutoriels précédents.

Paramétrage de l'image d'arrière-plan : Pour la largeur de l'image renseignez 100%, hauteur de l'image cochée en "auto" et renseignez 100% dans le champ position verticale.

Objectif : Le visuel n'est pas tronqué et la zone d’affichage s’adapte au visuel et non l’inverse. (Aperçu sur Iphone 5, Galaxy S6-S20/ Huawei P9-P40, Iphone XS Max/XR/11/11 Pro Max.)

Dans la zone du conteneur : Laisse la largeur du conteneur à 100%, mais passez la hauteur à 0 pixel.

Paramétrage de l'image d'arrière-plan : Pour la largeur de l'image renseignez 100%, et pour la hauteur de l'image cochez "auto".

Paramétrage de la position : Renseignez des valeurs égales dans position en haut et en bas afin d'afficher l'ensemble de l'image dans le Designer.