Hong Cheung 
Attention
Cette méthode nécessite l’utilisation de .mdx
J’adore écrire mes articles de blog en Markdown.
Cependant, la modification des images est l’un des points de friction.
Dans cet article, je vais vous apprendre à redimensionner et positionner vos images comme vous le souhaitez en utilisant un peu de HTML.
Pas d’inquiétude, je vais vous guider pas à pas.
Le problème
La seule façon d’insérer des images dans votre article de blog Markdown est celle-ci :
Résultat :
Je sais qu’elle est mignonne, mais elle occupe tout l’écran ! Et si vous la vouliez plus petite ?
Redimensionner
Ici, un peu de HTML peut résoudre ce problème pour vous.
Instead of using , we use the following:<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px;" />Explication du code :
Le src est l’abréviation de la source de votre image de chaton.
L’attribut alt est l’endroit où vous mettez ceci - ! [description de l’image ici] ( Lien )
Le style est la façon dont vous modifiez la présentation de votre image. Ici, je l’ai réglé pour afficher une largeur maximale de 400 pixels - quoi qu’il arrive.
Résultat :
Vous pouvez changer la max-width comme vous le souhaitez.
Cependant, remarquez que je n’ai pas modifié la max-height ici. C’est parce que si vous définissez une largeur et une hauteur fixes pour une image, elle risque d’être déformée, et vous ne voulez pas de ça.
Il est donc préférable de définir soit max-width, soit max-height pour votre image afin de conserver le bon ratio.
Position
Vous voudrez peut-être aussi centrer votre image au lieu de la laisser du côté par défaut.
Vous pouvez le faire en ajoutant ‘margin: auto;’ après ‘max-with: 400px;‘.
Code :
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />Résultat :
Parfait ! Vous connaissez maintenant la méthode de base pour modifier la taille de vos images dans votre article de blog.
Je veux maintenant vous montrer une autre façon d’obtenir le même résultat, mais sans doute meilleure.
Voyons ma méthode préférée pour modifier les images en Markdown.
Ma préférence
Code :
<div style="max-width: 400px; margin: auto"> </div>Résultat :
Comme vous pouvez le voir, le résultat est identique à celui ci-dessus ! Mais le code semble plus propre. Plus important encore, vous pouvez toujours utiliser la méthode par défaut pour insérer votre image :
Ensuite, entourez-la d’une div (un conteneur, dans ce contexte, pour votre image)
<div style="max-width: 400px; margin: auto"></div>Vous vous souvenez du style=“max-width: 400px; margin: auto”, que nous avons utilisé dans notre img ?
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />Nous reprenons simplement la modification de style et l’appliquons au conteneur qui renferme l’image.
<div style="max-width: 400px; margin: auto"> </div>Ainsi, vous profitez des avantages des deux méthodes ! Et le rendu est soigné, en plus !
Merci de votre lecture, j’espère que cela vous aidera !
N’hésitez pas à me signaler tout problème dans la section des commentaires ci-dessous.
Bonne écriture !
