Za dodavanje slika u Markdown:
Sintaksa je dana u nastavku.
Za promjenu veličine slike u Markdownu:
Za izmjenu veličine slike u Markdownu koristimo oznaku “ ” u HTML-u. Samo ova oznaka pomaže u mijenjanju veličine slike u Markdownu, a sintaksa ove oznake “
” navedena je u nastavku.
< img src = 'ime slike' sve = “” širina = 'vrijednost' visina = 'vrijednost' >
Veličinu slike možemo mijenjati postavljanjem vrijednosti širine i visine u brojevima kao i u postocima. Također možemo koristiti atribut stila u ovoj oznaci “ ” za izmjenu veličine slike u Markdownu.
Primjer # 01:
Koristimo Visual Studio Code za izvođenje Markdown kodova. Za Markdown kodove, moramo otvoriti i uređivač teksta kao i prozor za pregled. U uređivaču teksta moramo dodati unos, a izlaz se dobiva u prozoru za pregled. U uređivaču teksta najprije dodajemo sliku u Markdown stavljanjem znaka “!” simbol i zatim dodamo uglate zagrade u koje dodajemo “Alt text”. Sada dodajemo putanju slike.
Naziv slike unosimo s ekstenzijom jer su i kod i slika spremljeni u istom direktoriju. Dakle, ovdje samo dodajemo naziv koji je 'cloud.png'. Zatim dodajemo tekst koji je 'Slika u oblaku' i to je tekst koji se prikazuje samo kada prijeđete mišem. Sada je slika dodana i tu sliku također možemo vidjeti u prozoru za pregled.
Slika oblaka prikazana je ispod jer smo je dodali u Markdown kod koji je prikazan iznad.
Primjer # 02:
Sada mijenjamo veličinu ove slike pomoću oznake “ ”. Prvo upisujemo “src” u koji je dodan naziv ili putanja slike. Nakon toga postavljamo 'alt' i podešavamo 'Cloud Image'. Podesili smo 'širinu' slike na '230'. “Visina” je podešena na “300”. Također dodajemo “title” u ovu oznaku “
” i vrijednost ovog “title” je “Cloud title”. Sada je veličina slike izmijenjena. Izmijenjenu veličinu slike možete vidjeti u prozoru za pregled.
Veličina slike u ovom ishodu je modificirana i 'širina' slike je '230', a 'visina' je '300'. To je zato što smo prilagodili ovu širinu i visinu u Markdown kodu.
Primjer # 03:
Također možemo promijeniti 'širinu' i 'visinu' slike stavljajući njihove vrijednosti u postotke. Nakon dodavanja naziva ili putanje slike i podešavanja 'alt' na 'Cloud Image', postavili smo 'širinu' i 'visinu' slike na '50%'. Zatim dodajte 'naslov' i zatvorite ovu oznaku.
Ovdje je slika čija je veličina promijenjena pomoću oznake “ ”. Visina slike, kao i širina, su '50%'.
Primjer # 04:
Sada koristimo atribut “style” u ovoj oznaci “ ” za izmjenu veličine slike u Markdownu. Moramo dodati naziv slike, a zatim atribut 'alt'. Nakon toga smo stavili atribut 'style' i dodali 'width i height' kao njegove vrijednosti. “Širina” koju postavljamo je u pikselima što je “500px”, a “visina” je “400px”. Sada će se veličina slike prilagoditi u skladu s tim.
Veličina slike u ovom rezultatu je ažurirana; njegova 'širina' je sada '500px', a 'visina' je '400px'. To je vidljivo kao rezultat koda Markdown koji je dat gore gdje smo prilagodili širinu i visinu u atributu stila.
Primjer # 05:
Dodajemo još jednu sliku. Ali u ovom Markdown kodu ne mijenjamo veličinu slike. Veličina slike se mijenja samo kada smo upotrijebili oznaku “ ”. Stavili smo '!' a zatim dodajte tekst unutar uglatih zagrada koji je 'Slika sunca'. Nakon zatvaranja uglatih zagrada, stavljamo zagrade u koje smo umetnuli naziv slike “New_sun.png” i zatim dodajemo tekst koji će se pokazati kada prijeđemo mišem. Izvorna veličina slike prikazat će se u ishodu.
Slika sunca je prikazana jer smo je dodali u Markdown kod. Također, izvorna veličina slike je vidljiva jer ne možemo prilagoditi veličinu slike bez upotrebe oznake “ ”.
Primjer # 06:
Upotrebom oznake “ ” sada mijenjamo veličinu ove slike. Prvo u polje “src” dodajemo naziv ili putanju slike čiju veličinu želimo promijeniti. I 'širina' i 'visina' slike promijenjene su u '300'. Veličina slike sada je promijenjena. Prozor za pregled prikazuje novu veličinu slike.
Širina i visina slike promijenjene su na '300'.
Primjer # 07:
Postavljanjem vrijednosti 'širine' i 'visine' slike u postocima, možemo jednostavno promijeniti te dimenzije. Oboje smo prilagodili 'širinu' i 'visinu' slike na '40%', a zatim zatvorili ovu oznaku.
Ovdje je slika s 40% visine i također 40% širine. Dodali smo ovu širinu i visinu unutar oznake “ ” nakon dodavanja naziva slike.
Primjer # 08:
Sada koristimo atribut “style” u oznaci “ ” za promjenu veličine slike u Markdownu. Dodali smo 'širinu i visinu' kao vrijednosti atributu 'style' nakon dodavanja naziva slike i atributa 'alt'. “Širina” koju navodimo je “450px”, dok je “visina” također podešena na “450px”. Veličina slike sada će se prikladno promijeniti u skladu s ovim novim vrijednostima širine i visine.
Sada je rezultat ovog koda također prikazan u prozoru za pregled koji je prikazan ispod. I širina i visina ove slike sada su '450px' u ovom ishodu u nastavku.
Zaključak:
Detaljno smo istražili koncept dodavanja slika u ovom vodiču, a također smo istražili kako promijeniti veličinu slike u Markdownu. Dodali smo slike u Markdown i izmijenili njihovu veličinu uz pomoć oznake “ ” te pokazali kako sve to učiniti u Markdownu. Promijenili smo veličinu slike stavljajući vrijednosti širine i visine u brojeve kao iu postotke. Također smo upotrijebili atribut stila u oznaci “
” za ažuriranje ili izmjenu veličine slike u Markdownu.