Legg til bilder i Markdown og endre bildestørrelse

Legg til bilder i Markdown og endre bildestørrelse
"Markdown" er et av markeringsspråket som gir forskjellige fasiliteter for å legge til tekst, overskrifter, avsnitt, lister og lenker, og vi kan også bruke formatering på disse elementene i Markdown. Vi kan også sette inn bilder i Markdown og deretter endre størrelsen på bilder som vi har lagt til i Markdown. For å endre eller endre størrelsen på bildet i Markdown, må vi bruke taggen. Vi vil vise deg, i denne guiden, hvordan du legger til bilder i Markdown, samt hvordan du endrer størrelsen på bildet i Markdown.

For å legge til bilder i Markdown:

Syntaksen er gitt nedenfor.

![ALT -tekst] (banen til bildet/bildetavnet med utvidelse "Tekst som viser når Mouseover")

For å endre bildestørrelse i markdown:

For å endre størrelsen på bildet i Markdown, bruker vi "" -merket til HTML. Bare denne taggen hjelper til med å endre størrelsen på bildet i Markdown, og syntaksen til denne "" -merket er gitt nedenfor.

Vi kan endre størrelsen på bildet ved å sette verdiene på bredde og høyde i antall så vel som i prosenter. Vi kan også bruke stilattributtet i denne "" -koden for å endre størrelsen på bildet i Markdown.

Eksempel # 01:

Vi bruker Visual Studio -koden for å utføre markdown -kodene. For Markdown -kodene må vi åpne både tekstredigereren og forhåndsvisningsvinduet. I tekstredigereren må vi legge til inngangen og utgangen er oppnådd i forhåndsvisningsvinduet. I tekstredigereren legger vi først bildet i markdown ved å plassere "!”Symbol og legg deretter til firkantede parenteser der vi legger til“ ALT -tekst ”. Nå legger vi til banen til bildet.

Vi skriver inn navnet på bildet med utvidelsen fordi både koden og bildet er lagret i samme katalog. Så vi legger bare til navnet her som er “Cloud.PNG ”. Deretter legger vi til teksten som er "Cloud Image", og dette er teksten som bare viser når musen. Nå blir bildet lagt til, og vi kan også se dette bildet i forhåndsvisningsvinduet.

Skybildet vises nedenfor, da vi har lagt til dette bildet i markdown -koden som vises ovenfor.

Eksempel # 02:

Nå endrer vi størrelsen på dette bildet ved å bruke "" -merket. Først skriver vi inn "SRC" som navnet eller banen til bildet blir lagt til. Etter dette plasserer vi “alt” og justerer “skybilde”. Vi justerte "bredden" på bildet til "230". "Høyden" justeres til "300". Vi legger også til "tittelen" i denne "" -merket, og verdien av denne "tittelen" er "Cloud Title". Nå er størrelsen på bildet endret. Du kan se den modifiserte størrelsen på bildet i forhåndsvisningsvinduet.

Størrelsen på bildet i dette utfallet er endret, og "bredden" på bildet er "230" og "høyden" er "300". Dette er fordi vi har justert denne bredden og høyden i markdown -koden.

Eksempel # 03:

Vi kan også endre bildet "bredde" og "høyde" ved å sette verdiene sine i prosenter. Etter å ha lagt til navnet eller banen til bildet og justert "alt" til "skybilde", har vi satt "bredden" og "høyden" på bildet til "50%". Legg deretter til "tittelen" og lukk denne taggen.

Her er bildet hvis størrelse er endret ved å bruke "" -koden. Bildets høyde, så vel som bredden, er "50%".

Eksempel # 04:

Nå bruker vi “Style” -attributtet i denne “" -koden for å endre størrelsen på bildet i Markdown. Vi må legge til navnet på bildet og deretter "ALT" -attributtet. Etter dette satte vi "stil" -attributtet og la til "bredde og høyde" som verdier. "Bredden" vi setter er i piksler som er "500px" og "høyden" er "400px". Nå vil bildestørrelsen justeres deretter.

Bildets størrelse i dette resultatet er oppdatert; Den "bredden" er nå "500px" og "høyden" er "400px". Dette er synlig som et resultat av markdown -koden som er gitt ovenfor der vi har justert bredden og høyden i stilattributtet.

Eksempel nr. 05:

Vi legger til et nytt bilde. Men i denne markdown -koden endrer vi ikke størrelsen på bildet. Størrelsen på bildet endres bare når vi har brukt "" -merket. Vi legger “!”Og legg deretter til teksten i de firkantede parentesene som er“ Sun Image ”. Etter å ha stengt de firkantede parentesene, plasserer vi parentesene vi har satt inn bildetavnet “new_sun.PNG ”og legg deretter til teksten som vises på musover. Den opprinnelige størrelsen på bildet vises i utfallet.

Bildet av solen vises da vi har lagt til dette bildet i Markdown -koden. Dessuten er den opprinnelige størrelsen på bildet synlig fordi vi ikke kan justere størrelsen på bildet uten å bruke "" -merket.

Eksempel # 06:

Ved å bruke "" -merket, endrer vi nå størrelsen på dette bildet. Først legger vi til navnet eller banen til bildet hvis størrelse vi ønsker å endre til "SRC" -feltet. Bildets "bredde" og "høyde" er begge endret til "300". Bildets størrelse har nå endret seg. Forhåndsvisningsvinduet viser den nye størrelsen på bildet.

Bildets bredde og høyde er begge modifisert til “300”.

Eksempel # 07:

Ved å stille inn bildens "bredde" og "høyde" -verdier i prosenter, kan vi lett endre disse dimensjonene. Vi justerte begge bildene “bredde” og “høyde” til “40%” og lukket deretter denne taggen.

Her er bildet med 40% høyde og også 40% i bredden. Vi har lagt til denne bredden og høyden inne i "" -merket etter å ha lagt til bildens navn.

Eksempel nr. 08:

Nå bruker vi "stil" -attributtet i "" -merket for å endre bildets størrelse i Markdown. Vi la til "bredde og høyde" som verdiene til "stilen" -attributtet etter å ha lagt til bildenavnet og "Alt" -attributtet. "Bredden" vi spesifiserer er "450px", mens "høyden" også er justert til "450px.”Bildestørrelsen vil nå endres riktig i henhold til disse nye verdiene av bredde og høyde.

Nå vises også resultatet av denne koden i forhåndsvisningsvinduet som vises nedenfor. Både bredden og høyden på dette bildet er nå “450px” i dette utfallet nedenfor.

Konklusjon:

Vi har undersøkt konseptet med å legge til bilder i detalj i denne guiden, og vi har også undersøkt hvordan vi kan endre størrelsen på bildet i Markdown også. Vi har lagt til bildene i Markdown og endret størrelsen ved hjelp av "" -merket og har vist hvordan du gjør alle disse i Markdown. Vi har endret størrelsen på bildet ved å sette verdiene på bredde og høyde i antall så vel som i prosenter. Vi har også brukt stilattributtet i "" -merket for å oppdatere eller endre størrelsen på bildet i Markdown.