Table des matières
Les navigateurs Web comme Firefox, Chrome, Safari, Opéra, etc.. Tous ceux suivre les règles sur la façon de redimensionner les éléments en fonction du flux et de la mise en page de la pageCes règles peuvent être très détaillées peut-être, mais c'est ce qui nous permet de préciser comment les éléments doivent être traités pour que les tailles soient toujours maintenues en proportion de ce que l'on attend d'eux.Propriétés de taille
Il existe des propriétés de taille qui nous permettent de dire au navigateur comment il doit interpréter nos éléments, voyons une liste d'entre eux avant d'aller à leur application :
Largeur hauteur: Ils configurent la largeur et la hauteur d'un élément, les valeurs qu'il peut prendre sont les suivantes : auto et.
min-largeur / min-hauteur : Il nous permet de définir la largeur ou la hauteur minimale d'un élément, les valeurs qu'il peut prendre sont les suivantes : auto et
max-width / max-height : Définit la hauteur ou la largeur maximale acceptable pour un élément, ses valeurs possibles sont : auto et
dimensionnement de la boîte: Il établit quelle partie de l'élément box est prise pour la taille, celles disponibles sont : content-box padding-box border-box margin-box.
Si vous ne définissez aucune valeur pour les propriétés affichées, la valeur par défaut sera : auto, même si elle n'est pas spécifiée, ce qui signifie que le navigateur sera celui qui définira les tailles, comme nous l'avons vu, nous pouvons définir les tailles en utilisant des mesures de longueur ou des pourcentages, les pourcentages étant calculés en fonction de la largeur de l'élément conteneur.
Après avoir vu la théorie, nous allons maintenant passer à la pratique, voyons le code suivant où nous allons définir la taille de deux éléments afin que nous puissions voir comment tout cela fonctionne :
Exemple
Comme on peut le voir, ce que nous avons fait ici est très simple, nous avons établi une largeur et une hauteur pour l'élément div de la page, puis nous spécifions deux identifiants où nous plaçons chacun un différent dimensionnement de la boîteVoyons ce que tout cela génère pour nous :
Que se passe-t-il si nous jouons maintenant un peu avec le redimensionnement de la taille de la fenêtre du navigateur, nous savons que le div sera à 75% de la taille de son conteneur, dans ce cas son conteneur est body qui change avec la fenêtre et à son tour l'image avec sélecteur #première C'est 50% de la largeur de son conteneur, qui dans ce cas est div, quand on voit ça on sait que quelque chose ne va pas être conservé tel quel, voyons ce qui se passe dans le navigateur avec tout ça.
AGRANDIR
