Article en %

Pour illustrer ce que je propose en page explicative, voici un article avec des cadres et images en dimensions adaptatives, ici en %.

Un paragraphe sans largeur définie, va utiliser la largeur de la page et, en hauteur, adaptera sa hauteur à ce qu'il contient.
Si vous dimensionnez un paragraphe en unités adaptatives, pensez à utiliser ces mesures pour les bordures et positionnements afin que quel que soit la résolution de l'écran de lecture, la structure de votre article soit la même.

Une image a des dimensions bien précise avec un rapport entre largeur/hauteur (4/3, 16/9...) et si vous précisez une dimension, le programme adaptera l'autre.

Les unités adaptatives s'adaptent à l'écran de lecture et ne sont donc pas des unités fixes, mais des % ou l'équivalent en unités viewport (vw et vh); mais commençons par les %.

La largeur de votre page est de 100% mais, il est préférable de considérer qu'elle mesure 90%/95% car notre configuration de blog ajoute souvent des marges.

Dans ce paragraphe texte avec image sur le côté, le paragraphe texte est de largeur 30% et hauteur:auto (width:30%; height:auto;) et celui, placé à côte (float:left;) contenant l'image, est paramétré à largeur 60% et la hauteur n''est pas précisée car c'est l'image qui va la déterminer.

L'image contenue dans ce dernier paragraphe le remplira et sa largeur sera donc de 100% de son contenant, la hauteur étant calculée par le programme.

Un détail: les ombres ne sont pas comprises dans la taille de l'image et non prises en compte pour la hauteur du paragraphe.

Regardons quelles unités utiliser pour les dimensions cadre, police, positionnement, ombres...

Width et height (largeur/hauteur) acceptent les %.

Les positionnements par transform:translate(H%,V%) et par margin:5% 0 0 5%; aussi.

Les tailles de police aussi mais avec une valeur de 100% pour la taille par défaut; on peut utiliser les tailles en viewport, plus simples à maîtriser.

La largeur de bordure n'accepte pas les % mais les viewport sont acceptées.

Concernant les images contenues dans un paragraphe:
Si vous définissez la largeur de l'image à 100%, elle va remplir toute la largeur de son paragraphe.
Ainsi, si le paragraphe la contenant représente 60% de la largeur de votre page, l'image remplira entièrement ces 60%.
C'est le cas de mes exemples, avec des images hébergées sur Ekla en 1920x1080px, qui remplissent les paragraphes de 60% de la largeur de ma page, sans avoir à imposer quoi que ce soit d'autre.

Les codes utilisés pour les paragraphes textes sont:

<p style="float: left; width: 30%; height: auto; border: 0.3vw double black; text-align: center; font-size: 14px;">texte</p>

et pour les images:

<p style="float: left; width: 60%; margin: 0 0 1% 1%;"><img style="width: 100%; border: 0.5vw solid white; box-shadow: 0.2vw 0.2vh 1vw black; box-sizing: border-box;" src="https://ekladata.com/xz67Ct7OgqX21KfAvTvgmT9dG70.jpg" alt="" /></p>

Vous remarquerez le positionnement par margin pour écarter ces 2 paragraphes et les dimensions de l'image avec bordure comprise (box-sizing:border-box;).