Přidat obrázky v Markdown a upravit velikost obrázku

Pro přidání obrázků do Markdown:

Syntaxe je uvedena níže.

Pro úpravu velikosti obrázku v Markdown:

Pro úpravu velikosti obrázku v Markdown používáme značku „ “ v HTML. Pouze tato značka pomáhá při úpravě velikosti obrázku v Markdown a syntaxe této značky „ “ je uvedena níže.

Velikost obrázku můžeme změnit nastavením hodnot šířky a výšky v číslech i v procentech. Atribut style v této značce „ “ můžeme také použít pro úpravu velikosti obrázku v Markdown.

Příklad č. 01:

Pro provádění kódů Markdown používáme Visual Studio Code. Pro kódy Markdown musíme otevřít jak textový editor, tak okno náhledu. V textovém editoru musíme přidat vstup a výstup se získá v náhledovém okně. V textovém editoru nejprve přidáme obrázek do Markdown umístěním „!“ a poté přidejte hranaté závorky, do kterých přidáme „Alt text“. Nyní přidáme cestu k obrázku.

Název obrázku zadáváme s jeho příponou, protože kód i obrázek jsou uloženy ve stejném adresáři. Takže jsme sem přidali název, který je „cloud.png“. Poté přidáme text, který je „Cloud Image“ a toto je text, který se zobrazí pouze při přejetí myší. Nyní je obrázek přidán a můžeme jej také vidět v okně náhledu.

Obrázek cloudu je zobrazen níže, protože jsme tento obrázek přidali do kódu Markdown, který je zobrazen výše.

Příklad č. 02:

Nyní upravujeme velikost tohoto obrázku pomocí značky „ “. Nejprve zadáme „src“, do kterého je přidán název nebo cesta k obrázku. Poté umístíme „alt“ a upravíme „Cloud Image“. Upravili jsme „šířku“ obrazu na „230“. „Výška“ je nastavena na „300“. Do tohoto tagu „ “ také přidáváme „title“ a hodnota tohoto „title“ je „Cloud title“. Nyní je velikost obrázku upravena. Upravenou velikost obrázku můžete vidět v okně náhledu.

Velikost obrázku v tomto výsledku je upravena a „šířka“ obrázku je „230“ a „výška“ je „300“. Je to proto, že jsme tuto šířku a výšku upravili v kódu Markdown.

Příklad č. 03:

Můžeme také upravit „šířku“ a „výšku“ obrázku zadáním jejich hodnot v procentech. Po přidání názvu nebo cesty k obrázku a úpravě „altu“ na „Cloud Image“ jsme nastavili „šířku“ a „výšku“ obrázku na „50 %“. Poté přidejte „title“ a zavřete tuto značku.

Zde je obrázek, jehož velikost je upravena pomocí značky „ “. Výška i šířka obrázku jsou „50 %“.

Příklad č. 04:

Nyní používáme atribut „style“ v této značce „ “ pro úpravu velikosti obrázku v Markdown. Musíme přidat název obrázku a poté atribut „alt“. Poté jsme vložili atribut „style“ a jako jeho hodnoty přidali „šířku a výšku“. „Šířka“, kterou jsme nastavili, je v pixelech, což je „500 pixelů“ a „výška“ je „400 pixelů“. Nyní se tomu přizpůsobí velikost obrázku.

Velikost obrázku v tomto výsledku byla aktualizována; jeho „šířka“ je nyní „500 pixelů“ a jeho „výška“ je „400 pixelů“. To je viditelné jako výsledek kódu Markdown, který je uveden výše, kde jsme upravili šířku a výšku v atributu style.

Příklad č. 05:

Přidáváme další obrázek. Ale v tomto kódu Markdown neměníme velikost obrázku. Velikost obrázku se změní pouze v případě, že použijeme značku „ “. Vložili jsme '!' a poté přidejte text do hranatých závorek, což je „Sun Image“. Po uzavření hranatých závorek umístíme závorky, do kterých jsme vložili název obrázku „New_sun.png“ a poté přidáme text, který se zobrazí při přejetí myší. Ve výsledku se zobrazí původní velikost obrázku.

Obrázek slunce je zobrazen tak, jak jsme tento obrázek přidali do kódu Markdown. Také je vidět původní velikost obrázku, protože nemůžeme upravit velikost obrázku bez použití značky „ “.

Příklad č. 06:

Použitím tagu „ “ nyní měníme velikost tohoto obrázku. Nejprve do pole „src“ přidáme název nebo cestu k obrázku, jehož velikost chceme upravit. „Šířka“ a „výška“ obrázku byly změněny na „300“. Velikost obrázku se nyní změnila. V okně náhledu se zobrazí nová velikost obrázku.

Šířka a výška obrázku byly upraveny na „300“.

Příklad č. 07:

Nastavením hodnot „šířky“ a „výšky“ obrázku v procentech můžeme tyto rozměry snadno změnit. Oba jsme upravili „šířku“ a „výšku“ obrázku na „40 %“ a poté jsme tuto značku zavřeli.

Zde je obrázek se 40 % výšky a také 40 % na šířku. Tuto šířku a výšku jsme přidali do tagu „ “ po přidání názvu obrázku.

Příklad č. 08:

Nyní používáme atribut „style“ ve značce „ “ ke změně velikosti obrázku v Markdown. Po přidání názvu obrázku a atributu „alt“ jsme do atributu „style“ přidali hodnoty „šířka a výška“. Zadaná „šířka“ je „450 pixelů“, zatímco „výška“ je také upravena na „450 pixelů“. Velikost obrázku se nyní vhodně změní podle těchto nových hodnot šířky a výšky.

Nyní je výsledek tohoto kódu také zobrazen v okně náhledu, které je zobrazeno níže. Šířka i výška tohoto obrázku jsou nyní v tomto výsledku níže „450 pixelů“.

Závěr:

V této příručce jsme podrobně prozkoumali koncept přidávání obrázků a také jsme prozkoumali, jak upravit velikost obrázku v Markdown. Přidali jsme obrázky do Markdown a upravili jejich velikost pomocí tagu „ “ a ukázali jsme, jak to vše udělat v Markdown. Změnili jsme velikost obrázku tím, že jsme hodnoty šířky a výšky uváděli v číslech i v procentech. Také jsme použili atribut style v tagu „ “ pro aktualizaci nebo úpravu velikosti obrázku v Markdown.