-
Adaptatif 2
Comme indiqué dans ma page précédente, sur ce sujet, je reviens pour essayer d'en comprendre un peu plus sur cette histoire de dimensions en % ou/ou en vw/vh.
Tout d'abord, concernant notre page de blog sur Ekla; l'onglet Apparence/modifier le thème/format du blog/fond nous permet de déterminer la largeur de notre blog en % ce qui permet à nos lecteurs qui le lisent avec un média à écran réduit, de le voir dans son intégralité, sous un format adapté à leur écran; le zoom leur permet d'agrandir les zones pour ne pas avoir des textes illisibles car trop petits.
Nous avons vu qu'une image ou un cadre peut être dimensionné en largeur en W% de la largeur de l'écran qui le lit; ainsi, si j'écris:
<p style="width:40%; margin:0% auto; background:lime;"> </p>
J'obtiens:
La hauteur n'étant définie, une valeur mini est prise par défaut; si j'écris:
<p style="width:40%; height:20%; margin:0% auto; background:lime;"> </p>
j'obtiens:
Pas la bonne solution sur un cadre; Essayons avec une image, aux dimensions définies:800x450px !
<p style="text-align:center;><img style="width:40%; " src="http://ekladata.com/iMwU59n_5EUuiFnv28S2G5v3ys8.jpg"></p>
La hauteur est adaptée automatiquement; aucun changement si je précise height:20%; sur le paragraphe et/ou sur l'image .
Changeons d'unité.
<p style="text-align: center;"><img style="width: 40vw; height: 30vh;" src="http://ekladata.com/iMwU59n_5EUuiFnv28S2G5v3ys8.jpg" alt="" /></p>
La hauteur de l'image est bien paramétrée selon la valeur choisie en vh