Pour ajouter des images dans Markdown :
La syntaxe est donnée ci-dessous.
Pour modifier la taille de l'image dans Markdown :
Pour modifier la taille de l'image dans Markdown, nous utilisons la balise ' ' du HTML. Seule cette balise aide à modifier la taille de l'image dans Markdown et la syntaxe de cette balise '
' est donnée ci-dessous.
< image src = 'nom de l'image' tout = '' largeur = 'évaluer' la taille = 'évaluer' >
Nous pouvons modifier la taille de l'image en définissant les valeurs de largeur et de hauteur en nombres ainsi qu'en pourcentages. Nous pouvons également utiliser l'attribut style dans cette balise ' ' pour modifier la taille de l'image dans Markdown.
Exemple #01 :
Nous utilisons le code Visual Studio pour exécuter les codes Markdown. Pour les codes Markdown, nous devons ouvrir à la fois l'éditeur de texte et la fenêtre de prévisualisation. Dans l'éditeur de texte, nous devons ajouter l'entrée et la sortie est obtenue dans la fenêtre de prévisualisation. Dans l'éditeur de texte, on ajoute d'abord l'image dans Markdown en plaçant le '!' symbole, puis ajoutez des crochets dans lesquels nous ajoutons 'Texte alternatif'. Maintenant, nous ajoutons le chemin de l'image.
Nous entrons le nom de l'image avec son extension car le code et l'image sont enregistrés dans le même répertoire. Donc, nous ajoutons simplement le nom ici qui est 'cloud.png'. Ensuite, nous ajoutons le texte qui est 'Cloud Image' et c'est le texte qui ne s'affiche qu'au passage de la souris. Maintenant, l'image est ajoutée et nous pouvons également voir cette image dans la fenêtre d'aperçu.
L'image du nuage est montrée ci-dessous car nous avons ajouté cette image dans le code Markdown qui est affiché ci-dessus.
Exemple #02 :
Maintenant, nous modifions la taille de cette image en utilisant la balise ' '. Tout d'abord, nous entrons dans le 'src' dans lequel le nom ou le chemin de l'image est ajouté. Après cela, nous plaçons 'alt' et ajustons 'Cloud Image'. Nous avons ajusté la 'largeur' de l'image à '230'. La « hauteur » est réglée sur « 300 ». Nous ajoutons également le 'title' dans cette balise '
' et la valeur de ce 'title' est 'Cloud title'. Maintenant, la taille de l'image est modifiée. Vous pouvez voir la taille modifiée de l'image dans la fenêtre d'aperçu.
La taille de l'image dans ce résultat est modifiée et la 'largeur' de l'image est '230' et la 'hauteur' est '300'. C'est parce que nous avons ajusté cette largeur et cette hauteur dans le code Markdown.
Exemple #03 :
Nous pouvons également modifier la 'largeur' et la 'hauteur' de l'image en mettant leurs valeurs en pourcentages. Après avoir ajouté le nom ou le chemin de l'image et ajusté le « alt » sur « Cloud Image », nous avons défini la « largeur » et la « hauteur » de l'image sur « 50 % ». Ensuite, ajoutez le 'titre' et fermez cette balise.
Voici l'image dont la taille est modifiée en utilisant la balise « ». La hauteur de l'image, ainsi que la largeur, sont de '50 %'.
Exemple #04 :
Maintenant, nous utilisons l'attribut 'style' dans cette balise ' ' pour modifier la taille de l'image dans Markdown. Il faut ajouter le nom de l'image puis l'attribut « alt ». Après cela, nous avons mis l'attribut 'style' et ajouté 'largeur et hauteur' comme valeurs. La 'largeur' que nous définissons est en pixels qui est '500px' et la 'hauteur' est '400px'. Maintenant, la taille de l'image s'ajustera en conséquence.
La taille de l'image dans ce résultat a été mise à jour ; sa 'largeur' est maintenant '500px' et sa 'hauteur' est '400px'. Ceci est visible à la suite du code Markdown qui est donné ci-dessus où nous avons ajusté la largeur et la hauteur dans l'attribut style.
Exemple #05 :
Nous ajoutons une autre image. Mais dans ce code Markdown, nous ne modifions pas la taille de l'image. La taille de l'image n'est modifiée que lorsque nous avons utilisé la balise ' '. On met le '!' puis ajoutez le texte à l'intérieur des crochets qui est 'Sun Image'. Après avoir fermé les crochets, nous plaçons les parenthèses dans lesquelles nous avons inséré le nom de l'image 'Nouveau_soleil.png' puis ajoutons le texte qui s'affichera au passage de la souris. La taille originale de l'image apparaîtra dans le résultat.
L'image du soleil est affichée telle que nous avons ajouté cette image dans le code Markdown. De plus, la taille originale de l'image est visible car nous ne pouvons pas ajuster la taille de l'image sans utiliser la balise ' '.
Exemple #06 :
En utilisant la balise ' ', nous modifions maintenant la taille de cette image. Tout d'abord, nous ajoutons le nom ou le chemin de l'image dont nous voulons modifier la taille dans le champ 'src'. La 'largeur' et la 'hauteur' de l'image ont toutes deux été changées en '300'. La taille de l'image a maintenant changé. La fenêtre d'aperçu affiche la nouvelle taille de l'image.
La largeur et la hauteur de l'image ont toutes deux été modifiées à '300'.
Exemple #07 :
En définissant les valeurs de 'largeur' et de 'hauteur' de l'image en pourcentages, nous pouvons facilement modifier ces dimensions. Nous avons tous les deux ajusté la 'largeur' et la 'hauteur' de l'image à '40 %', puis nous avons fermé cette balise.
Voici l'image avec 40% de hauteur et aussi 40% de largeur. Nous avons ajouté cette largeur et cette hauteur à l'intérieur de la balise ' ' après avoir ajouté le nom de l'image.
Exemple #08 :
Maintenant, nous utilisons l'attribut 'style' dans la balise ' ' pour modifier la taille de l'image dans Markdown. Nous avons ajouté 'largeur et hauteur' comme valeurs à l'attribut 'style' après avoir ajouté le nom de l'image et l'attribut 'alt'. La 'largeur' que nous spécifions est '450px', tandis que la 'hauteur' est également ajustée à '450px'. La taille de l'image va maintenant changer de manière appropriée en fonction de ces nouvelles valeurs de largeur et de hauteur.
Maintenant, le résultat de ce code est également affiché dans la fenêtre d'aperçu qui s'affiche ci-dessous. La largeur et la hauteur de cette image sont désormais de '450px' dans le résultat ci-dessous.
Conclusion:
Nous avons exploré le concept d'ajout d'images en détail dans ce guide et nous avons également exploré comment modifier la taille de l'image dans Markdown. Nous avons ajouté les images dans Markdown et modifié leur taille à l'aide de la balise ' ' et avons montré comment faire tout cela dans Markdown. Nous avons changé la taille de l'image en mettant les valeurs de largeur et de hauteur en chiffres ainsi qu'en pourcentages. Nous avons également utilisé l'attribut style dans la balise '
' pour mettre à jour ou modifier la taille de l'image dans Markdown.