Voor het toevoegen van afbeeldingen in Markdown:
De syntaxis wordt hieronder gegeven.
Voor het wijzigen van de afbeeldingsgrootte in Markdown:
Om de grootte van de afbeelding in Markdown aan te passen, gebruiken we de tag ' ' van de HTML. Alleen deze tag helpt bij het aanpassen van de grootte van de afbeelding in Markdown en de syntaxis van deze '
' -tag wordt hieronder gegeven.
< img src = 'naam afbeelding' alles = '' breedte = 'waarde' hoogte = 'waarde' >
We kunnen de grootte van de afbeelding wijzigen door de waarden voor breedte en hoogte in te stellen in zowel getallen als percentages. We kunnen ook het stijlkenmerk in deze tag ' ' gebruiken om de grootte van de afbeelding in Markdown te wijzigen.
Voorbeeld # 01:
We gebruiken de Visual Studio-code voor het uitvoeren van de Markdown-codes. Voor de Markdown-codes moeten we zowel de teksteditor als het voorbeeldvenster openen. In de teksteditor moeten we de invoer toevoegen en de uitvoer wordt verkregen in het voorbeeldvenster. In de teksteditor voegen we eerst de afbeelding toe in Markdown door de '!' symbool en voeg vervolgens vierkante haken toe waarin we 'Alt-tekst' toevoegen. Nu voegen we het pad van de afbeelding toe.
We voeren de naam van de afbeelding met zijn extensie in omdat zowel de code als de afbeelding in dezelfde map worden opgeslagen. Dus we voegen hier gewoon de naam toe die 'cloud.png' is. Vervolgens voegen we de tekst toe die 'Cloud Image' is en dit is de tekst die alleen wordt weergegeven als de muisaanwijzer erop klikt. Nu is de afbeelding toegevoegd en kunnen we deze afbeelding ook zien in het voorbeeldvenster.
De cloudafbeelding wordt hieronder weergegeven, aangezien we deze afbeelding hebben toegevoegd aan de Markdown-code die hierboven wordt weergegeven.
Voorbeeld # 02:
Nu wijzigen we de grootte van deze afbeelding door de tag ' ' te gebruiken. Eerst voeren we de 'src' in waarin de naam of het pad van de afbeelding wordt toegevoegd. Hierna plaatsen we “alt” en passen we “Cloud Image” aan. We hebben de 'breedte' van de afbeelding aangepast naar '230'. De “hoogte” is ingesteld op “300”. We voegen ook de 'titel' toe aan deze '
'-tag en de waarde van deze 'titel' is 'Cloudtitel'. Nu wordt de grootte van de afbeelding gewijzigd. U kunt de gewijzigde grootte van de afbeelding zien in het voorbeeldvenster.
De grootte van de afbeelding in deze uitkomst is gewijzigd en de 'breedte' van de afbeelding is '230' en de 'hoogte' is '300'. Dit komt doordat we deze breedte en hoogte hebben aangepast in de Markdown code.
Voorbeeld # 03:
We kunnen ook de afbeelding 'breedte' en 'hoogte' wijzigen door hun waarden in percentages in te voeren. Na het toevoegen van de naam of het pad van de afbeelding en het aanpassen van de 'alt' naar 'Cloud Image', hebben we de 'breedte' en de 'hoogte' van de afbeelding ingesteld op '50%'. Voeg vervolgens de 'titel' toe en sluit deze tag.
Hier is de afbeelding waarvan de grootte is gewijzigd met behulp van de tag ' '. Zowel de hoogte als de breedte van de afbeelding zijn '50%'.
Voorbeeld # 04:
Nu gebruiken we het kenmerk 'style' in deze tag ' ' om de grootte van de afbeelding in Markdown te wijzigen. We moeten de naam van de afbeelding toevoegen en vervolgens het attribuut 'alt'. Hierna hebben we het kenmerk 'stijl' toegevoegd en 'breedte en hoogte' toegevoegd als zijn waarden. De 'breedte' die we instellen is in pixels, wat '500px' is en de 'hoogte' is '400px'. Nu wordt de afbeeldingsgrootte overeenkomstig aangepast.
De grootte van de afbeelding in dit resultaat is bijgewerkt; de 'breedte' is nu '500px' en de 'hoogte' is '400px'. Dit is zichtbaar als resultaat van de Markdown code die hierboven is gegeven waarbij we de breedte en hoogte hebben aangepast in het style attribuut.
Voorbeeld # 05:
We voegen nog een afbeelding toe. Maar in deze Markdown-code veranderen we de grootte van de afbeelding niet. De grootte van de afbeelding wordt alleen gewijzigd als we de tag ' ' hebben gebruikt. We zetten de '!' en voeg vervolgens de tekst toe tussen de vierkante haken die 'Sun Image' is. Nadat we de vierkante haken hebben gesloten, plaatsen we de haakjes waarin we de afbeeldingsnaam 'New_sun.png' hebben ingevoegd en voegen vervolgens de tekst toe die wordt weergegeven bij mouseover. De originele grootte van de afbeelding wordt weergegeven in het resultaat.
De afbeelding van de zon wordt weergegeven zoals we deze afbeelding hebben toegevoegd aan de Markdown-code. Ook is de oorspronkelijke grootte van de afbeelding zichtbaar omdat we de grootte van de afbeelding niet kunnen aanpassen zonder de tag ' '.
Voorbeeld # 06:
Door de tag ' ' te gebruiken, veranderen we nu de grootte van deze afbeelding. Eerst voegen we de naam of het pad van de afbeelding waarvan we de grootte willen wijzigen toe aan het veld 'src'. De 'breedte' en 'hoogte' van de afbeelding zijn beide gewijzigd in '300'. De grootte van de afbeelding is nu gewijzigd. Het voorbeeldvenster toont de nieuwe grootte van de afbeelding.
De breedte en hoogte van de afbeelding zijn beide gewijzigd in '300'.
Voorbeeld # 07:
Door de waarden voor 'breedte' en 'hoogte' van de afbeelding in procenten in te stellen, kunnen we deze afmetingen gemakkelijk wijzigen. We hebben allebei de 'breedte' en 'hoogte' van de afbeelding aangepast naar '40%' en vervolgens deze tag gesloten.
Hier is de afbeelding met 40% hoogte en ook 40% in de breedte. We hebben deze breedte en hoogte toegevoegd aan de tag ' ' na het toevoegen van de naam van de afbeelding.
Voorbeeld # 08:
Nu gebruiken we het kenmerk 'style' in de tag ' ' om de grootte van de afbeelding in Markdown te wijzigen. We hebben 'breedte en hoogte' toegevoegd als de waarden aan het kenmerk 'stijl' na het toevoegen van de afbeeldingsnaam en het kenmerk 'alt'. De 'breedte' die we specificeren is '450px', terwijl de 'hoogte' ook wordt aangepast naar '450px'. De afbeeldingsgrootte zal nu overeenkomstig deze nieuwe waarden voor breedte en hoogte veranderen.
Nu wordt het resultaat van deze code ook getoond in het voorbeeldvenster dat hieronder wordt weergegeven. Zowel de breedte als de hoogte van deze afbeelding zijn nu '450px' in deze uitkomst hieronder.
Conclusie:
We hebben het concept van het toevoegen van afbeeldingen in detail onderzocht in deze handleiding en we hebben ook onderzocht hoe we de grootte van de afbeelding in Markdown kunnen wijzigen. We hebben de afbeeldingen in Markdown toegevoegd en hun grootte aangepast met behulp van de ' '-tag en hebben laten zien hoe dit allemaal in Markdown kan worden gedaan. We hebben de grootte van de afbeelding gewijzigd door de waarden van breedte en hoogte in cijfers en in percentages te zetten. We hebben ook het stijlkenmerk in de tag '
' gebruikt voor het bijwerken of wijzigen van de grootte van de afbeelding in Markdown.