Votre vw

J'ai déjà fait quelque chose là-dessus mais comme je sais que cela est parfois difficile de passer des unités fixes (pixels) au unités adaptatives (vw, dans mon cas), je vais essayer d'être plus clair.

Tout d'abord, pourquoi modifier ses habitudes des pixels; si vous publiez une image en 1400px de large et que le visiteur dispose d'un écran d'une résolution de 1200px, en largeur, il n'affichera pas la totalité de l'image d'un coup.

Si vous publiez une image en 60vw (équivalent de 60% de la largeur), cette image occupera 60% de la largeur de l'écran de lecture, quel que soit sa résolution.

Voilà pour l'intérêt; ensuite, quelle valeur de vw adopter pour votre blog ?

Pour éviter tout calcul, je vous propose de copier, dans le code source d'un article d'essai (sans publication)

Copiez ce code dans le code source de cet article:

<p style="width:50vw; height:8vw; margin:2vh auto; background:yellow;">&nbsp;</p>

Cela devrait afficher un cadre jaune centré, de 50% de la largeur de votre écran.

A vous de modifier la valeur de width pour que le cadre rentre dans votre zone article, sans déborder et avec un peu de marge de chaque côté.

****************

Vous aurez peut-être (sûrement !) besoin de dimensionner des images; il vous suffira de déterminer la largeur en vw et, selon le ratio de votre image (16/9 ou 4/3), le programme déterminera la hauteur adaptative à appliquer ... c'est beau l'électronique !

On peut vouloir calculer la valeur de la hauteur, par rapport à une largeur choisie ou inversement, une largeur, par rapport à une hauteur choisie.

Dans ce cas, la règle de trois s'impose !

Si la largeur que vous déterminez à votre image (ou cadre) est de 50vw, avec un ratio largeur/hauteur de 16/9:

50vw = 16

hauteur x=9

x=9/16x50=28.125vw

===================

Pour déterminer une largeur, par rapport à une hauteur définie, pour une image "verticale", par exemple,même règle:

hauteur:28vw =16

largeur y=9/16x28=15.75vw

D'où l'intérêt de n'utiliser que la même unité adaptative pour la largeur et la hauteur.

Lorsque nous plaçons une image en fond de boîte, nous devons calculer la hauteur en fonction de la largeur définie ou l'inverse; la règle de trois fonctionne toujours mais si ça peut aider, voici une petit tableau  qui peut servir de base: