• Divers rappel

    Unité adaptative en unité viewport: vw pour la largeur et vh pour la hauteur.

    La question souvent posée est: mais combien de px dans 1 vw ou 1 vh ?

    1vw=1% de la largeur de votre écran de même que 1vh=1% de la hauteur de votre écran ... ce qui fait que la réponse ne peut être donnée qu'en connaissant la résolution de votre écran.

    Nous pouvons utiliser l'unité % mais elle n'est pas acceptée en positionnement, contrairement aux vw/vh.

    Pour se simplifier les calculs, je conseille de n'utiliser qu'une des 2 unités: exemple vw.

    Si la largeur de votre écran est de 1400px, sur votre écran, 1vw=1%x1400px=14px; cette valeur vous permet de calculer la largeur maxi d'un élément, pour la largeur de votre zone article, que vous connaissez en pixel !

    Sur une image, pas trop de souci puisque, si vous indiquez la largeur, le programme va calculer la hauteur en respectant le ratio.

    Par contre, sur un cadre, il vous faut calculer la hauteur: exemple: votre largeur est de 60vw et vous voulez un cadre au ratio 16/9: 60x9/16:33.75vw. ou encore: 40x9/16=22.5vw ....

    Un autre sujet auquel je pense est le remplissage d'un cadre avec un image, comme lors d'une image qui est mise en fond de cadre.

    Nous avons plusieurs choix: je choisis volontairement un cadre qui n'est pas au ratio 16/9.

     

    <p style="width:20vw; height:10vw; background:url('http://ekladata.com/KZy7S8iyQTXLWQUCp3BYtZbJkoM.jpg');">&nbsp;</p>

    Sans rien préciser, le cadre ne va prendre que la partie haut/gauche de l'image.

     

    <p style="width: 20vw; height: 10vw; background: url('http://ekladata.com/KZy7S8iyQTXLWQUCp3BYtZbJkoM.jpg'); background-size: contain;">&nbsp;</p>

    Background-size:contain; va remplir le cadre avec l'image, sans la modifier mais en la répétant, éventuellement (ci, à droite).

     

    <p style="width:20vw; height:10vw; background:url('http://ekladata.com/KZy7S8iyQTXLWQUCp3BYtZbJkoM.jpg'); background-size:cover;">&nbsp;</p>

    background-size:cover; va remplir le cadre en la déformant éventuellement.

     

    <p style="width:20vw; height:10vw; background:url('http://ekladata.com/KZy7S8iyQTXLWQUCp3BYtZbJkoM.jpg'); background-size:20vw 10vw;">&nbsp;</p>

    Vous obtenez le même résultat en indiquant les dimensions du fond que vous souhaitez.

     

    <p style="width:20vw; height:10vw; border:0.1vh solid black; background:url('http://ekladata.com/KZy7S8iyQTXLWQUCp3BYtZbJkoM.jpg'); background-size:10vw 5vw; background-repeat:no-repeat; background-position:0vw 0vw;">&nbsp;</p>

    Vous pouvez choisir les dimensions de l'image et son positionnement.
    Une autre écriture vous permettra de placer et de positionner plusieurs images en fond, avec ou sans couleur de fond; j'ai déjà publié quelques chose là-dessus !