Pridajte obrázky do Markdown a Upravte veľkosť obrázka

Pre pridávanie obrázkov do Markdown:

Syntax je uvedená nižšie.

Pre úpravu veľkosti obrázka v Markdown:

Na úpravu veľkosti obrázka v Markdown používame značku „ “ v HTML. Iba táto značka pomáha pri úprave veľkosti obrázka v Markdown a syntax tejto značky „ “ je uvedená nižšie.

Veľkosť obrázku môžeme zmeniť nastavením hodnôt šírky a výšky v číslach aj v percentách. Atribút style v tejto značke „ “ môžeme použiť aj na úpravu veľkosti obrázka v Markdown.

Príklad č. 01:

Na vykonávanie kódov Markdown používame kód Visual Studio. Pre kódy Markdown musíme otvoriť textový editor aj okno náhľadu. V textovom editore musíme pridať vstup a výstup sa získa v náhľadovom okne. V textovom editore najprv pridáme obrázok do Markdown umiestnením znaku „!“ a potom pridajte hranaté zátvorky, do ktorých pridáme „Alternatívny text“. Teraz pridávame cestu k obrázku.

Názov obrázku zadávame s jeho príponou, pretože kód aj obrázok sú uložené v rovnakom adresári. Takže tu len pridáme názov, ktorý je „cloud.png“. Potom pridáme text, ktorý je „Cloud Image“ a toto je text, ktorý sa zobrazí iba pri prejdení myšou. Teraz je obrázok pridaný a môžeme ho vidieť aj v okne náhľadu.

Obrázok cloudu je zobrazený nižšie, pretože sme tento obrázok pridali do kódu Markdown, ktorý je zobrazený vyššie.

Príklad č. 02:

Teraz upravujeme veľkosť tohto obrázka pomocou značky „ “. Najprv zadáme „src“, do ktorého sa pridá názov alebo cesta k obrázku. Potom umiestnime „alt“ a upravíme „Cloud Image“. Upravili sme „šírku“ obrazu na „230“. „Výška“ sa nastaví na „300“. Do tohto tagu „ “ pridávame aj „title“ a hodnota tohto „title“ je „Cloud title“. Teraz je veľkosť obrázka upravená. Upravenú veľkosť obrázka môžete vidieť v okne náhľadu.

Veľkosť obrázka v tomto výsledku je upravená a „šírka“ obrázka je „230“ a „výška“ je „300“. Túto šírku a výšku sme totiž upravili v kóde Markdown.

Príklad č. 03:

Môžeme tiež upraviť „šírku“ a „výšku“ obrázka vložením ich hodnôt v percentách. Po pridaní názvu alebo cesty k obrázku a úprave „altu“ na „Cloud Image“ sme nastavili „šírku“ a „výšku“ obrázka na „50 %“. Potom pridajte „názov“ a zatvorte túto značku.

Tu je obrázok, ktorého veľkosť je upravená pomocou značky „ “. Výška a šírka obrázka sú „50 %“.

Príklad č. 04:

Teraz používame atribút „style“ v tejto značke „ “ na úpravu veľkosti obrázka v Markdown. Musíme pridať názov obrázka a potom atribút „alt“. Potom vložíme atribút „style“ a ako jeho hodnoty pridáme „šírka a výška“. „Šírka“, ktorú sme nastavili, je v pixeloch, čo je „500 pixelov“ a „výška“ je „400 pixelov“. Teraz sa veľkosť obrázka prispôsobí.

Veľkosť obrázka v tomto výsledku bola aktualizovaná; jeho „šírka“ je teraz „500 pixelov“ a jeho „výška“ je „400 pixelov“. Je to viditeľné ako výsledok kódu Markdown, ktorý je uvedený vyššie, kde sme upravili šírku a výšku v atribúte style.

Príklad č. 05:

Pridávame ďalší obrázok. V tomto kóde Markdown však nemeníme veľkosť obrázka. Veľkosť obrázka sa zmení iba vtedy, keď použijeme značku „ “. Dali sme '!' a potom pridajte text do hranatých zátvoriek, čo je „Slnečný obraz“. Po zatvorení hranatých zátvoriek umiestnime zátvorky, do ktorých sme vložili názov obrázku „New_sun.png“ a potom pridáme text, ktorý sa zobrazí pri prejdení myšou. Vo výsledku sa zobrazí pôvodná veľkosť obrázka.

Obrázok slnka sa zobrazuje tak, ako sme tento obrázok pridali do kódu Markdown. Tiež je viditeľná pôvodná veľkosť obrázka, pretože nemôžeme upraviť veľkosť obrázka bez použitia značky „ “.

Príklad č. 06:

Použitím značky „ “ teraz meníme veľkosť tohto obrázka. Najprv do poľa „src“ pridáme názov alebo cestu k obrázku, ktorého veľkosť chceme upraviť. „Šírka“ a „výška“ obrázka sa zmenili na „300“. Veľkosť obrázka sa teraz zmenila. V okne náhľadu sa zobrazí nová veľkosť obrázka.

Šírka a výška obrázka boli upravené na „300“.

Príklad č. 07:

Nastavením hodnôt „šírky“ a „výšky“ obrázka v percentách môžeme tieto rozmery jednoducho zmeniť. Obaja sme upravili „šírku“ a „výšku“ obrázka na „40 %“ a potom sme túto značku zatvorili.

Tu je obrázok so 40 % výšky a tiež 40 % na šírku. Túto šírku a výšku sme pridali do značky „ “ po pridaní názvu obrázka.

Príklad č. 08:

Teraz používame atribút „style“ v značke „ “ na zmenu veľkosti obrázka v Markdown. Po pridaní názvu obrázka a atribútu „alt“ sme do atribútu „style“ pridali hodnoty „šírka a výška“. „Šírka“, ktorú určujeme, je „450 pixelov“, zatiaľ čo „výška“ je tiež upravená na „450 pixelov“. Veľkosť obrázka sa teraz primerane zmení podľa týchto nových hodnôt šírky a výšky.

Teraz sa výsledok tohto kódu zobrazí aj v okne náhľadu, ktoré je zobrazené nižšie. Šírka aj výška tohto obrázka sú teraz v tomto výsledku nižšie „450 pixelov“.

Záver:

V tejto príručke sme podrobne preskúmali koncept pridávania obrázkov a tiež sme preskúmali, ako upraviť veľkosť obrázka v Markdown. Pridali sme obrázky do Markdown a upravili ich veľkosť pomocou značky „ “ a ukázali sme, ako to všetko urobiť v Markdown. Zmenili sme veľkosť obrázka tak, že sme hodnoty šírky a výšky uviedli v číslach aj v percentách. Atribút štýlu v značke „ “ sme tiež použili na aktualizáciu alebo úpravu veľkosti obrázka v Markdown.