Dimensionner une image en %

Publier des articles qui s'adaptent à l'écran de lecture oblige à les dimensionner en % (valeur variable) et non en pixels (valeur fixe).

Les % tiennent compte de la largeur de votre écran.

L'image ci-dessous est hébergée en 1920x1080px et réduite à 50% de votre écran, quelle que soit sa résolution:

<p><img id="r1" src="http://ekladata.com/WRVNWIv2WOF0lve8vc-Mvb8cGvU.jpg"></p>
<style><!--
#r1{width:50%; height:auto;}
--></style>

Comme vous le voyez, rien de compliqué là-dedans, si l'on sait héberger et copier l'adresse d'une image; sur Ekla, je conseille d'utiliser les albums pour héberger ses images; elles sont ainsi toujours accessibles et utilisables.

Dans cet exemple de base, pas de décoration ni de positionnement.

Pour une bordure et un centrage dans la page:

<p style="text-align: center;"><img id="r2" src="http://ekladata.com/WRVNWIv2WOF0lve8vc-Mvb8cGvU.jpg" alt="" /></p>
<style><!--
#r2{width:50%; height:auto; border:6px ridge grey;}
--></style>