Adapter son site partout
Facile !
[tab=Informations concernant ce tutoriel]▪ Temps de lecture : 05 minutes
▪ Difficulté : 1 / 5
▪ Tutoriel proposé par la RGPC, écrit par Maxence103 RPC
[/tab]
[/tabs]
COMPRENDRE
Je ne sais pas si on a tous un HP PAVILLON G6, non ? Peut être qu'on a pas tous la même taille d'écran ?
Et bien voilà pourquoi ce tuto: régler chaque image automatiquement pour chaque taille d'écran.
Pour encore mieux comprendre, acceptez à ce site:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
(dev par moi ^^). en grande fenêtre. Vous voyez que l'image fait exactement toute la taille de l'écran. Maintenant, cliquez sur le carré pour "réduire" la taille du navigateur : l'image s'est rétrécie.Voilà ce que nous allons faire. Mais vous allez remarquer aussi que la barre de navigation en haut (noire) a eu exactement le même comportement : autrement dit, on peut faire ça avec tout.
Comment faire ?
Prenons une image, celle là:
http://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fi.imgur.com%2FkyhzuJu.gif&hash=b09974740a84fba664b53aa7a8d33386
N'hésitez pas à la télécharger pour faire des tests.
Maintenant, créez un fichier .html (n'importe quel nom) et mettez ce code:
HTML:
<img src="image.gif" />(je sais pas l'extension du fichier ^^)
Vous allez voir que l'image ne va pas prendre tout l'écran: c'est normal, car elle va prendre sa taille initiale.
Maintenant, je veux que ça prenne toute la largeur sur mon écran.
Alors je vais utiliser:
HTML:
<img src="image.gif" width="1000px" />(j'invente le nombre de pixel, mais on imagine que ça soit la largeur de mon écran).
Ok, super, ça prend tout MON écran, et pas celui qui en a un plus grand / petit.
Et bien, nous allons demander à CSS de prendre toute la largeur de mon écran, (avec width toujours !) , mais cette fois, avec 100% ( = de mon écran ).
HTML:
<img src="image.gif" width="100%" />Pourquoi ça marcherai ? Parce que, width = largeur, 100% = tout, soit toute la largeur.
On appelle aussi le responsive design !
Et vous pouvez faire ça avec une barre horizontale, avec tout.
Voilà, en espérant que ça vous aura plus :-)
A+
