Til tilføjelse af billeder i Markdown:
Syntaksen er angivet nedenfor.
Til ændring af billedstørrelse i Markdown:
For at ændre størrelsen på billedet i Markdown bruger vi ' ' tagget i HTML. Kun dette tag hjælper med at ændre størrelsen på billedet i Markdown, og syntaksen for dette '
' tag er angivet nedenfor.
< img src = 'billede navn' alt = '' bredde = 'værdi' højde = 'værdi' >
Vi kan ændre størrelsen på billedet ved at indstille værdierne for bredde og højde i tal såvel som i procenter. Vi kan også bruge stilattributten i dette ' ' tag til at ændre størrelsen på billedet i Markdown.
Eksempel #01:
Vi bruger Visual Studio Code til at udføre Markdown-koderne. For Markdown-koderne skal vi åbne både teksteditoren og forhåndsvisningsvinduet. I teksteditoren skal vi tilføje input, og outputtet opnås i forhåndsvisningsvinduet. I teksteditoren tilføjer vi først billedet i Markdown ved at placere '!' symbol og derefter tilføje firkantede parenteser, hvor vi tilføjer 'Alt-tekst'. Nu tilføjer vi stien til billedet.
Vi indtaster navnet på billedet med dets udvidelse, fordi både koden og billedet er gemt i samme mappe. Så vi tilføjer bare navnet her, som er 'cloud.png'. Derefter tilføjer vi teksten, som er 'Cloud Image', og dette er teksten, der kun vises, når du bevæger musen. Nu er billedet tilføjet, og vi kan også se dette billede i forhåndsvisningsvinduet.
Skybilledet er vist nedenfor, da vi har tilføjet dette billede i Markdown-koden, som vises ovenfor.
Eksempel #02:
Nu ændrer vi størrelsen på dette billede ved at bruge ' '-tagget. Først indtaster vi 'src', hvor navnet eller stien til billedet er tilføjet. Herefter placerer vi 'alt' og justerer 'Cloud Image'. Vi justerede 'bredden' af billedet til '230'. 'Højden' er justeret til '300'. Vi tilføjer også 'titlen' i dette '
' tag, og værdien af denne 'titel' er 'Cloud title'. Nu er størrelsen på billedet ændret. Du kan se den ændrede størrelse af billedet i forhåndsvisningsvinduet.
Størrelsen af billedet i dette resultat er ændret, og 'bredden' af billedet er '230' og 'højden' er '300'. Dette skyldes, at vi har justeret denne bredde og højde i Markdown-koden.
Eksempel #03:
Vi kan også ændre billedets 'bredde' og 'højde' ved at sætte deres værdier i procenter. Efter at have tilføjet navnet eller stien til billedet og justeret 'alt' til 'Cloud Image', har vi sat 'bredden' og 'højden' af billedet til '50%'. Tilføj derefter 'titlen' og luk dette tag.
Her er billedet, hvis størrelse er ændret ved at bruge tagget ' '. Billedets højde, såvel som bredden, er '50%'.
Eksempel #04:
Nu bruger vi 'stil'-attributten i dette ' '-tag til at ændre størrelsen på billedet i Markdown. Vi skal tilføje navnet på billedet og derefter 'alt'-attributten. Efter dette satte vi 'stil'-attributten og tilføjede 'bredde og højde' som dens værdier. Den 'bredde', vi indstiller, er i pixels, som er '500px', og 'højden' er '400px'. Nu vil billedstørrelsen justeres i overensstemmelse hermed.
Billedets størrelse i dette resultat er blevet opdateret; dens 'bredde' er nu '500px', og dens 'højde' er '400px'. Dette er synligt som et resultat af Markdown-koden, som er givet ovenfor, hvor vi har justeret bredden og højden i style-attributten.
Eksempel #05:
Vi tilføjer endnu et billede. Men i denne Markdown-kode ændrer vi ikke størrelsen på billedet. Størrelsen på billedet ændres kun, når vi har brugt ' '-tagget. Vi sætter '!' og tilføj derefter teksten inden for de firkantede parenteser, som er 'Solbillede'. Efter at have lukket de firkantede parenteser placerer vi parenteserne, som vi har indsat billednavnet 'New_sun.png' i, og tilføjer derefter teksten, som vises ved museover. Billedets originale størrelse vil blive vist i resultatet.
Billedet af solen vises, da vi har tilføjet dette billede i Markdown-koden. Billedets originale størrelse er også synlig, fordi vi ikke kan justere størrelsen på billedet uden at bruge ' '-tagget.
Eksempel #06:
Ved at bruge ' '-tagget ændrer vi nu størrelsen på dette billede. Først tilføjer vi navnet eller stien til det billede, hvis størrelse vi vil ændre, til feltet 'src'. Billedets 'bredde' og 'højde' er begge blevet ændret til '300'. Billedets størrelse er nu ændret. Eksempelvinduet viser den nye størrelse på billedet.
Billedets bredde og højde er begge blevet ændret til '300'.
Eksempel #07:
Ved at indstille billedets 'bredde' og 'højde' værdier i procenter, kan vi nemt ændre disse dimensioner. Vi justerede begge billedets 'bredde' og 'højde' til '40%' og lukkede derefter dette tag.
Her er billedet med 40% højde og også 40% i bredden. Vi har tilføjet denne bredde og højde inde i ' '-tagget efter at have tilføjet billedets navn.
Eksempel #08:
Nu bruger vi 'stil'-attributten i ' '-tagget til at ændre billedets størrelse i Markdown. Vi tilføjede 'bredde og højde' som værdierne til 'stil'-attributten efter tilføjelse af billednavnet og 'alt'-attributten. Den 'bredde', vi angiver, er '450px', mens 'højden' også er justeret til '450px.' Billedstørrelsen vil nu ændre sig passende i henhold til disse nye værdier for bredde og højde.
Nu vises resultatet af denne kode også i forhåndsvisningsvinduet, som vises nedenfor. Både bredden og højden af dette billede er nu '450px' i dette resultat nedenfor.
Konklusion:
Vi har udforsket konceptet med at tilføje billeder i detaljer i denne vejledning, og vi har også undersøgt, hvordan man også kan ændre størrelsen på billedet i Markdown. Vi har tilføjet billederne i Markdown og ændret deres størrelse ved hjælp af ' '-tagget og har vist, hvordan man gør alle disse i Markdown. Vi har ændret størrelsen på billedet ved at sætte værdierne for bredde og højde i tal såvel som i procenter. Vi har også brugt style-attributten i '
'-tagget til at opdatere eller ændre størrelsen på billedet i Markdown.