Aggiungi immagini in Markdown e modifica la dimensione dell'immagine

Aggiungi Immagini In Markdown E Modifica La Dimensione Dell Immagine



'Markdown' è uno dei linguaggi di markup che fornisce diverse funzionalità per aggiungere testo, intestazioni, paragrafi, elenchi e collegamenti e inoltre possiamo applicare la formattazione a questi elementi in Markdown. Possiamo anche inserire immagini in Markdown e quindi modificare la dimensione delle immagini che abbiamo aggiunto in Markdown. Per modificare o cambiare la dimensione dell'immagine in Markdown, dobbiamo utilizzare il tag . Ti mostreremo, in questa guida, come aggiungere immagini in Markdown e come modificare le dimensioni dell'immagine in Markdown.

Per aggiungere immagini in Markdown:

La sintassi è riportata di seguito.

![alt text ](percorso dell'immagine/nome dell'immagine con estensione 'Testo che mostra quando si passa il mouse' )

Per modificare la dimensione dell'immagine in Markdown:

Per modificare la dimensione dell'immagine in Markdown, utilizziamo il tag ' ' dell'HTML. Solo questo tag aiuta a modificare la dimensione dell'immagine in Markdown e la sintassi di questo tag ' ' è riportata di seguito.







< img src = 'nome immagine' Tutto quanto = “” larghezza = 'valore' altezza = 'valore' >

Possiamo modificare le dimensioni dell'immagine impostando i valori di larghezza e altezza in numeri oltre che in percentuali. Possiamo anche usare l'attributo style in questo tag “ ” per modificare la dimensione dell'immagine in Markdown.



Esempio n. 01:

Usiamo il codice di Visual Studio per eseguire i codici Markdown. Per i codici Markdown, dobbiamo aprire sia l'editor di testo che la finestra di anteprima. Nell'editor di testo, dobbiamo aggiungere l'input e l'output si ottiene nella finestra di anteprima. Nell'editor di testo, aggiungiamo prima l'immagine in Markdown posizionando il '!' simbolo e quindi aggiungi parentesi quadre in cui aggiungiamo 'Testo alternativo'. Ora stiamo aggiungendo il percorso dell'immagine.



Inseriamo il nome dell'immagine con la sua estensione perché sia ​​il codice che l'immagine vengono salvati nella stessa directory. Quindi, aggiungiamo semplicemente il nome qui che è 'cloud.png'. Quindi, aggiungiamo il testo che è 'Cloud Image' e questo è il testo che viene visualizzato solo quando si passa il mouse. Ora l'immagine è stata aggiunta e possiamo anche vedere questa immagine nella finestra di anteprima.





L'immagine del cloud è mostrata di seguito poiché abbiamo aggiunto questa immagine nel codice Markdown visualizzato sopra.



Esempio n. 02:

Ora stiamo modificando le dimensioni di questa immagine utilizzando il tag ' '. Innanzitutto, inseriamo 'src' in cui viene aggiunto il nome o il percorso dell'immagine. Successivamente, posizioniamo 'alt' e regoliamo 'Cloud Image'. Abbiamo regolato la 'larghezza' dell'immagine su '230'. L''altezza' viene regolata su '300'. Aggiungiamo anche il 'titolo' in questo tag ' ' e il valore di questo 'titolo' è 'titolo cloud'. Ora, la dimensione dell'immagine è modificata. Puoi vedere la dimensione modificata dell'immagine nella finestra di anteprima.

La dimensione dell'immagine in questo risultato viene modificata e la 'larghezza' dell'immagine è '230' e l''altezza' è '300'. Questo perché abbiamo regolato questa larghezza e altezza nel codice Markdown.

Esempio n. 03:

Possiamo anche modificare la 'larghezza' e 'altezza' dell'immagine inserendo i loro valori in percentuale. Dopo aver aggiunto il nome o il percorso dell'immagine e regolato 'alt' su 'Cloud Image', abbiamo impostato la 'larghezza' e l''altezza' dell'immagine al '50%'. Quindi, aggiungi il 'titolo' e chiudi questo tag.

Ecco l'immagine la cui dimensione viene modificata utilizzando il tag ' '. L'altezza dell'immagine, così come la larghezza, sono '50%'.

Esempio n. 04:

Ora stiamo utilizzando l'attributo 'stile' in questo tag ' ' per modificare la dimensione dell'immagine in Markdown. Dobbiamo aggiungere il nome dell'immagine e poi l'attributo 'alt'. Successivamente, inseriamo l'attributo 'stile' e aggiungiamo 'larghezza e altezza' come valori. La 'larghezza' che impostiamo è in pixel che è '500px' e l''altezza' è '400px'. Ora, la dimensione dell'immagine si regolerà di conseguenza.

La dimensione dell'immagine in questo risultato è stata aggiornata; la sua 'larghezza' è ora '500px' e la sua 'altezza' è '400px'. Questo è visibile come risultato del codice Markdown riportato sopra dove abbiamo regolato la larghezza e l'altezza nell'attributo style.

Esempio n. 05:

Stiamo aggiungendo un'altra immagine. Ma in questo codice Markdown, non cambiamo le dimensioni dell'immagine. La dimensione dell'immagine viene modificata solo quando abbiamo utilizzato il tag ' '. Mettiamo il '!' e poi aggiungi il testo tra parentesi quadre che è 'Sun Image'. Dopo aver chiuso le parentesi quadre, mettiamo le parentesi in cui abbiamo inserito il nome dell'immagine “New_sun.png” e poi aggiungiamo il testo che apparirà al passaggio del mouse. La dimensione originale dell'immagine verrà mostrata nel risultato.

L'immagine del sole viene mostrata poiché abbiamo aggiunto questa immagine nel codice Markdown. Inoltre, la dimensione originale dell'immagine è visibile perché non possiamo regolare la dimensione dell'immagine senza utilizzare il tag ' '.

Esempio n. 06:

Utilizzando il tag ' ', ora stiamo cambiando le dimensioni di questa immagine. Innanzitutto, aggiungiamo il nome o il percorso dell'immagine di cui vogliamo modificare la dimensione nel campo 'src'. La 'larghezza' e l''altezza' dell'immagine sono state entrambe modificate in '300'. La dimensione dell'immagine è ora cambiata. La finestra di anteprima mostra la nuova dimensione dell'immagine.

La larghezza e l'altezza dell'immagine sono state entrambe modificate a '300'.

Esempio n. 07:

Impostando i valori di 'larghezza' e 'altezza' dell'immagine in percentuale, possiamo facilmente modificare queste dimensioni. Entrambi abbiamo regolato la 'larghezza' e 'altezza' dell'immagine su '40%' e quindi abbiamo chiuso questo tag.

Ecco l'immagine con il 40% di altezza e anche il 40% di larghezza. Abbiamo aggiunto questa larghezza e altezza all'interno del tag ' ' dopo aver aggiunto il nome dell'immagine.

Esempio n. 08:

Ora utilizziamo l'attributo 'stile' nel tag ' ' per modificare le dimensioni dell'immagine in Markdown. Abbiamo aggiunto 'larghezza e altezza' come valori all'attributo 'stile' dopo aver aggiunto il nome dell'immagine e l'attributo 'alt'. La 'larghezza' che specifichiamo è '450px', mentre anche l''altezza' viene regolata su '450px'. La dimensione dell'immagine ora cambierà in modo appropriato in base a questi nuovi valori di larghezza e altezza.

Ora, il risultato di questo codice viene mostrato anche nella finestra di anteprima che viene visualizzata di seguito. Sia la larghezza che l'altezza di questa immagine ora sono '450px' in questo risultato di seguito.

Conclusione:

Abbiamo esplorato in dettaglio il concetto di aggiunta di immagini in questa guida e abbiamo anche esplorato come modificare la dimensione dell'immagine anche in Markdown. Abbiamo aggiunto le immagini in Markdown e modificato le loro dimensioni con l'aiuto del tag ' ' e abbiamo mostrato come fare tutto questo in Markdown. Abbiamo modificato le dimensioni dell'immagine inserendo i valori di larghezza e altezza in numeri oltre che in percentuali. Abbiamo anche utilizzato l'attributo style nel tag ' ' per aggiornare o modificare la dimensione dell'immagine in Markdown.