Per afegir imatges a Markdown:
La sintaxi es mostra a continuació.
Per modificar la mida de la imatge a Markdown:
Per modificar la mida de la imatge a Markdown, utilitzem l'etiqueta ' ' de l'HTML. Només aquesta etiqueta ajuda a modificar la mida de la imatge a Markdown i la sintaxi d'aquesta etiqueta '
' es mostra a continuació.
< img src = 'nom de la imatge' tot = “” amplada = 'valor' alçada = 'valor' >
Podem canviar la mida de la imatge establint els valors d'amplada i alçada tant en nombres com en percentatges. També podem utilitzar l'atribut style d'aquesta etiqueta ' ' per modificar la mida de la imatge a Markdown.
Exemple # 01:
Utilitzem el codi Visual Studio per realitzar els codis Markdown. Per als codis Markdown, hem d'obrir tant l'editor de text com la finestra de vista prèvia. A l'editor de text, hem d'afegir l'entrada i la sortida s'obté a la finestra de vista prèvia. A l'editor de text, primer afegim la imatge a Markdown col·locant el '!' símbol i després afegiu claudàtors en què afegim 'Text alternatiu'. Ara, estem afegint el camí de la imatge.
Introduïm el nom de la imatge amb la seva extensió perquè tant el codi com la imatge es guarden al mateix directori. Per tant, només afegim el nom aquí que és 'cloud.png'. A continuació, afegim el text que és 'Imatge al núvol' i aquest és el text que només es mostra quan es passa el ratolí. Ara, s'afegeix la imatge i també podem veure aquesta imatge a la finestra de vista prèvia.
La imatge del núvol es mostra a continuació, ja que hem afegit aquesta imatge al codi Markdown que es mostra a dalt.
Exemple # 02:
Ara, estem modificant la mida d'aquesta imatge mitjançant l'etiqueta ' '. En primer lloc, introduïm el 'src' en el qual s'afegeix el nom o el camí de la imatge. Després d'això, col·loquem 'alt' i ajustem 'Imatge al núvol'. Hem ajustat l''amplada' de la imatge a '230'. L''alçada' s'ajusta a '300'. També afegim el 'títol' en aquesta etiqueta '
' i el valor d'aquest 'títol' és 'Títol del núvol'. Ara, es modifica la mida de la imatge. Podeu veure la mida modificada de la imatge a la finestra de vista prèvia.
La mida de la imatge en aquest resultat es modifica i l''amplada' de la imatge és '230' i l''alçada' és '300'. Això es deu al fet que hem ajustat aquesta amplada i alçada al codi Markdown.
Exemple # 03:
També podem modificar la imatge 'amplada' i 'alçada' posant els seus valors en percentatges. Després d'afegir el nom o el camí de la imatge i ajustar l''alt' a 'Imatge al núvol', hem establert l''amplada' i l''alçada' de la imatge al '50%'. A continuació, afegiu el 'títol' i tanqueu aquesta etiqueta.
Aquí teniu la imatge la mida de la qual es modifica mitjançant l'etiqueta ' '. L'alçada de la imatge, així com l'amplada, són '50%'.
Exemple # 04:
Ara, estem utilitzant l'atribut 'style' en aquesta etiqueta ' ' per modificar la mida de la imatge a Markdown. Hem d'afegir el nom de la imatge i després l'atribut “alt”. Després d'això, posem l'atribut 'style' i afegim 'amplada i alçada' com a valors. L''amplada' que establim és en píxels que és '500px' i l''alçada' és '400px'. Ara, la mida de la imatge s'ajustarà en conseqüència.
La mida de la imatge en aquest resultat s'ha actualitzat; la seva 'amplada' és ara '500px' i la seva 'alçada' és '400px'. Això és visible com a resultat del codi Markdown que es dóna a dalt on hem ajustat l'amplada i l'alçada a l'atribut d'estil.
Exemple # 05:
Estem afegint una altra imatge. Però en aquest codi Markdown, no canviem la mida de la imatge. La mida de la imatge només es canvia quan hem utilitzat l'etiqueta ' '. Posem el '!' i després afegiu el text dins dels claudàtors que és 'Imatge del sol'. Després de tancar els claudàtors, col·loquem els parèntesis en què hem inserit el nom de la imatge “New_sun.png” i després afegim el text que es mostrarà al passar el ratolí. La mida original de la imatge es mostrarà al resultat.
La imatge del sol es mostra ja que hem afegit aquesta imatge al codi Markdown. A més, la mida original de la imatge és visible perquè no podem ajustar la mida de la imatge sense utilitzar l'etiqueta ' '.
Exemple # 06:
En utilitzar l'etiqueta ' ', ara estem canviant la mida d'aquesta imatge. Primer, afegim el nom o el camí de la imatge la mida de la qual volem modificar al camp 'src'. L''amplada' i l''alçada' de la imatge s'han canviat a '300'. La mida de la imatge ara ha canviat. La finestra de vista prèvia mostra la nova mida de la imatge.
L'amplada i l'alçada de la imatge s'han modificat a '300'.
Exemple # 07:
En establir els valors 'amplada' i 'alçada' de la imatge en percentatges, podem canviar fàcilment aquestes dimensions. Tots dos vam ajustar l''amplada' i l''alçada' de la imatge al '40%' i després vam tancar aquesta etiqueta.
Aquí teniu la imatge amb un 40% d'alçada i també un 40% d'amplada. Hem afegit aquesta amplada i alçada dins de l'etiqueta ' ' després d'afegir el nom de la imatge.
Exemple # 08:
Ara, estem utilitzant l'atribut 'style' a l'etiqueta ' ' per canviar la mida de la imatge a Markdown. Hem afegit 'amplada i alçada' com a valors a l'atribut 'estil' després d'afegir el nom de la imatge i l'atribut 'alt'. L''amplada' que especifiquem és '450px', mentre que l''alçada' també s'ajusta a '450px'. La mida de la imatge ara canviarà adequadament segons aquests nous valors d'amplada i alçada.
Ara, el resultat d'aquest codi també es mostra a la finestra de vista prèvia que es mostra a continuació. Tant l'amplada com l'alçada d'aquesta imatge són ara '450 px' en aquest resultat a continuació.
Conclusió:
Hem explorat el concepte d'afegir imatges en detall en aquesta guia i també hem explorat com modificar la mida de la imatge a Markdown. Hem afegit les imatges a Markdown i hem modificat la seva mida amb l'ajuda de l'etiqueta “ ” i hem mostrat com fer-ho tot a Markdown. Hem canviat la mida de la imatge posant els valors d'amplada i alçada en números i també en percentatges. També hem utilitzat l'atribut style a l'etiqueta '
' per actualitzar o modificar la mida de la imatge a Markdown.