• 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;">&nbsp;</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;">&nbsp;</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