Aggiungi immagini in markdown e modifica la dimensione dell'immagine
Per l'aggiunta di immagini in Markdown:
La sintassi è riportata di seguito.
![alt text] (percorso dell'immagine/nome immagine con estensione "testo che mostra quando mouseover")Per modificare la dimensione dell'immagine in Markdown:
Per modificare le dimensioni 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.
Possiamo modificare le dimensioni dell'immagine impostando i valori di larghezza e altezza in numeri e in percentuale. Possiamo anche usare l'attributo di stile in questo tag "" per modificare la dimensione dell'immagine in Markdown.
Esempio # 01:
Utilizziamo il codice 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 è ottenuto nella finestra di anteprima. Nell'editor di testo, aggiungiamo prima l'immagine in Markdown posizionando il "!"Simbolo e quindi aggiungi parentesi quadrate in cui aggiungiamo" alt testo ". 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 solo il nome qui che è "Cloud.PNG ". Quindi, aggiungiamo il testo che è "Cloud Image" e questo è il testo che mostra solo quando il mouse. Ora, l'immagine viene aggiunta e possiamo anche vedere questa immagine nella finestra di anteprima.
L'immagine cloud è mostrata di seguito quando abbiamo aggiunto questa immagine nel codice di markdown che viene visualizzato sopra.
Esempio # 02:
Ora stiamo modificando le dimensioni di questa immagine usando il tag "". Innanzitutto, inseriamo "SRC" in cui viene aggiunto il nome o il percorso dell'immagine. Dopo questo, posizioniamo "alt" e regoliamo "immagine cloud". Abbiamo regolato la "larghezza" dell'immagine su "230". L '"altezza" è regolata a "300". Aggiungiamo anche il "titolo" in questo tag "" e il valore di questo "titolo" è "Cloud Title". Ora, la dimensione dell'immagine viene 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 di markdown.
Esempio # 03:
Possiamo anche modificare l'immagine "larghezza" e "altezza" mettendo i loro valori in percentuali. Dopo aver aggiunto il nome o il percorso dell'immagine e la regolazione "Alt" su "Cloud Image", abbiamo impostato la "larghezza" e l '"altezza" dell'immagine su "50%". Quindi, aggiungi il "titolo" e chiudi questo tag.
Ecco l'immagine la cui dimensione viene modificata usando il tag "". L'altezza dell'immagine, così come la larghezza, sono "50%".
Esempio # 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 quindi l'attributo "alt". Dopo questo, mettiamo l'attributo "stile" e aggiungiamo "larghezza e altezza" come valori. La "larghezza" che abbiamo impostato è in pixel che è "500px" e "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". Ciò è visibile a seguito del codice di markdown che viene fornito sopra in cui abbiamo regolato la larghezza e l'altezza nell'attributo di stile.
Esempio # 05:
Stiamo aggiungendo un'altra immagine. Ma in questo codice di 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 all'interno delle staffe quadrate che è" Sun Image ". Dopo aver chiuso le staffe quadrate, posizioniamo le parentesi in cui abbiamo inserito il nome dell'immagine “New_sun.png ”e quindi aggiungi il testo che verrà visualizzato su mouseover. La dimensione originale dell'immagine verrà visualizzata nel risultato.
L'immagine del sole viene mostrata quando abbiamo aggiunto questa immagine nel codice di markdown. Inoltre, la dimensione originale dell'immagine è visibile perché non possiamo regolare le dimensioni dell'immagine senza usare il tag "".
Esempio # 06:
Impiegando il tag "", ora stiamo cambiando le dimensioni di questa immagine. Innanzitutto, aggiungiamo il nome o il percorso dell'immagine di cui vogliamo modificare nel campo "SRC". La "larghezza" e "altezza" dell'immagine sono state entrambi cambiati 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 entrambi modificate in "300".
Esempio # 07:
Impostando i valori di "larghezza" e "altezza" dell'immagine in percentuale, possiamo facilmente cambiare queste dimensioni. Abbiamo entrambi regolato la "larghezza" e "altezza" dell'immagine al "40%" e quindi abbiamo chiuso questo tag.
Ecco l'immagine con un'altezza del 40% e anche il 40% nella sua larghezza. Abbiamo aggiunto questa larghezza e altezza all'interno del tag "" dopo aver aggiunto il nome dell'immagine.
Esempio # 08:
Ora stiamo usando l'attributo "stile" nel tag "" per modificare la dimensione 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" è 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 è anche mostrato nella finestra di anteprima visualizzata di seguito. Sia la larghezza che l'altezza di questa immagine sono ora "450px" in questo risultato di seguito.
Conclusione:
Abbiamo esplorato il concetto di aggiungere immagini in dettaglio in questa guida e abbiamo anche esplorato come modificare le dimensioni dell'immagine in Markdown. Abbiamo aggiunto le immagini in markdown e modificato le loro dimensioni con l'aiuto del tag "" e abbiamo mostrato come fare tutti questi in markdown. Abbiamo cambiato le dimensioni dell'immagine mettendo i valori di larghezza e altezza in numeri e in percentuale. Abbiamo anche utilizzato l'attributo di stile nel tag "" per l'aggiornamento o la modifica della dimensione dell'immagine in markdown.