Dimensions adaptatives

Depuis quelques temps, je m'exerce à utiliser des dimensions en % ou en vw/vh, ce qui revient au même:1 vw=1/100 largeur écran et 1vh=1/100 hauteur écran.

Il n'est pas toujours facile car il nous faut connaître la largeur de notre zone article ou de notre écran, d'un côté, et déterminer ce qu'une hauteur de 800px fait en vh de l'écran.

Nous pouvons espérer que désormais, la majorité des images sont au rapport 16/9, comme les écrans, ce qui arrange bien !

Voici une image hébergée en 1920x1080px, rapport 16/9, que je publie en 70% de la largeur de ma page, centrée dans un paragraphe= 1344px par 751px.

La hauteur se règle automatiquement à 70% de la hauteur de mon écran, conservant ainsi le rapport 16/9.

C'est le cas le plus simple puisque la largeur est définie; par contre, si nous voulons que notre image fasse une hauteur compatible avec celle de notre écran, il faut faire un petit calcul.

Voici une image de 600px de large pour 800px de haut, à gauche; pas de souci puisque la hauteur de mon écran est de 1080px moins les barres hautes soit peut être 900px.

Mon image suivante fait 1080px de large par 1920px de haut; si je ne modifie que la largeur par width:34vw; height:auto;  j'obtiens une image de 448x796px.

Reste à vérifier sur un autre écran, tout à l'heure et trouver le rapport en les vw et le px !