adaptatif3

Page plus pour moi qu'autre chose !
Il n'est pas simple, pour moi, de passer d'une unité en pixels à une unité en % et/ou en vw/vh et je vais essayer de me faire un petit tableau pour différentes valeurs que j'utilise.

Mon écran principal a une définition de 1920x1080px, idem pour ma page de blog et c'est cette dimension que j'ai adoptée pour mon appareil photo: rapport 16/9 et pour mes photos hébergées sur Ekla.

Je vais publier mes articles à 95% de ma page soit, en pixels: 1824x1026px.

Il me faut donc publier, dans ce cadre à ces dimensions, des images adaptées qui conserveront le rapport 16/9 pour ne pas être déformées; pour les photos "horizontales", pas de souci puisqu'il suffira de les paramétrer en width:95%, la hauteur adoptant automatiquement le même %, elle seront à la dimension de mon article.

L'unité viewport est une autre écriture que les %: vw est le % en largeur et vh est le % en hauteur (w=wide et h=height).

Prenons le cas d'une image "verticale", qui fera donc 1080px de largeur et 1920px de hauteur: si vous décidez d'une valeur largeur OU hauteur, vous pourrez mettre l'autre valeur à "auto" et le programme calculera la largeur pour que le ratio reste à 16/9.

Par contre, si vous voulez dimensionner un cadre, avec éventuellement une image de fond, vous devrez en déterminer les dimensions, toujours en conservant le rapport 16/9; sinon, pas de souci !

Ce qui amène à un tableau du genre: hauteur x largeur (valeurs arrondies).

1026x576px: 32vw et 104vh.

1000x563px: 30vw et 101vh.

900x506px: 27vw et 91vh.

800x450px: 24vw et 81vh.

700x394px: 21.4vw et 71vh.

600x338px:18vw et 61vh.

500x281px:15vw et 51vh.

400x225px:12vw et 41vh.

300x168px:9vw et 30.5vh.

200x113px:6vw et 20vh.

100x56px:3vw et 10vh.

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

Voyons sur un exemple, ce sera plus parlant !

Le code utilisé dont vous pouvez modifier les valeurs en fonction du tableau ci-dessus.

<p><img style="width: 32vw; height: 104vh;" src="http://ekladata.com/-PG6kejjM8ogYGYUal_LWF3Odl0.jpg" alt="" /></p>