For å legge til bilder i Markdown:
Syntaksen er gitt nedenfor.
For å endre bildestørrelse i Markdown:
For å endre størrelsen på bildet i Markdown, bruker vi « »-koden til HTML-en. Bare denne taggen hjelper til med å endre størrelsen på bildet i Markdown, og syntaksen til denne «
»-taggen er gitt nedenfor.
< img src = 'bildenavn' alt = «» bredde = 'verdi' høyde = 'verdi' >
Vi kan endre størrelsen på bildet ved å angi verdier for bredde og høyde i tall så vel som i prosenter. Vi kan også bruke stilattributtet i denne « »-taggen for å endre størrelsen på bildet i Markdown.
Eksempel # 01:
Vi bruker Visual Studio Code for å utføre Markdown-kodene. For Markdown-kodene må vi åpne både tekstredigeringsprogrammet og forhåndsvisningsvinduet. I tekstredigereren må vi legge til input og utdata hentes i forhåndsvisningsvinduet. I tekstredigeringsprogrammet legger vi først til bildet i Markdown ved å plassere '!' symbol og deretter legge til hakeparenteser 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 vises når du beveger musen over. Nå er bildet lagt til, og vi kan også se dette bildet i forhåndsvisningsvinduet.
Skybildet vises nedenfor ettersom vi har lagt til dette bildet i Markdown-koden som vises ovenfor.
Eksempel #02:
Nå endrer vi størrelsen på dette bildet ved å bruke « »-taggen. Først skriver vi inn 'src' der navnet eller banen til bildet er lagt til. Etter dette plasserer vi 'alt' og justerer 'Cloud Image'. Vi justerte 'bredden' på bildet til '230'. 'Høyden' er justert til '300'. Vi legger også til 'tittelen' i denne '
'-taggen, og verdien av denne 'tittelen' er 'Skytittel'. Nå er størrelsen på bildet endret. Du kan se den endrede størrelsen på bildet i forhåndsvisningsvinduet.
Størrelsen på bildet i dette resultatet 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 bildets 'bredde' og 'høyde' ved å sette verdiene deres i prosenter. Etter å ha lagt til navnet eller banen til bildet og justert 'alt' til 'Cloud Image', 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 « »-taggen. Bildets høyde, så vel som bredden, er '50 %'.
Eksempel # 04:
Nå bruker vi «stil»-attributtet i denne « »-taggen 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 verdiene. 'Bredden' vi angir er i piksler som er '500px' og 'høyden' er '400px'. Nå vil bildestørrelsen justeres tilsvarende.
Bildets størrelse i dette resultatet har blitt oppdatert; 'bredden' er nå '500px' og 'høyden' er '400px'. Dette er synlig som et resultat av Markdown-koden som er gitt ovenfor hvor vi har justert bredden og høyden i stilattributtet.
Eksempel # 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 « »-taggen. Vi setter '!' og legg deretter til teksten innenfor de firkantede parentesene som er 'Solbilde'. Etter å ha lukket de firkantede parentesene, setter vi inn parentesene som vi har satt inn bildenavnet 'New_sun.png' i og legger så til teksten som vil vises ved museover. Den opprinnelige størrelsen på bildet vises i resultatet.
Bildet av solen vises mens vi har lagt til dette bildet i Markdown-koden. Også den opprinnelige størrelsen på bildet er synlig fordi vi ikke kan justere størrelsen på bildet uten å bruke « »-taggen.
Eksempel # 06:
Ved å bruke « »-taggen endrer vi nå størrelsen på dette bildet. Først legger vi til navnet eller banen til bildet hvis størrelse vi vil endre i 'src'-feltet. Bildets 'bredde' og 'høyde' er begge endret til '300'. Bildets størrelse er nå endret. Forhåndsvisningsvinduet viser den nye størrelsen på bildet.
Bildets bredde og høyde er begge endret til '300'.
Eksempel #07:
Ved å angi bildets 'bredde' og 'høyde'-verdier i prosenter, kan vi enkelt endre disse dimensjonene. Vi justerte begge bildets '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 i « »-taggen etter å ha lagt til bildets navn.
Eksempel #08:
Nå bruker vi «stil»-attributtet i « »-taggen for å endre bildets størrelse i Markdown. Vi la til 'bredde og høyde' som verdiene til 'stil'-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 passende i henhold til disse nye verdiene for bredde og høyde.
Nå vises resultatet av denne koden også i forhåndsvisningsvinduet som vises nedenfor. Både bredden og høyden på dette bildet er nå '450px' i dette resultatet nedenfor.
Konklusjon:
Vi har utforsket konseptet med å legge til bilder i detalj i denne veiledningen, og vi har også utforsket hvordan du kan endre størrelsen på bildet i Markdown også. Vi har lagt til bildene i Markdown og endret størrelsen ved hjelp av « »-taggen og har vist hvordan du gjør alle disse i Markdown. Vi har endret størrelsen på bildet ved å sette verdiene for bredde og høyde i tall så vel som i prosenter. Vi har også brukt stilattributtet i «
»-taggen for å oppdatere eller endre størrelsen på bildet i Markdown.