I HTML kan vi ændre størrelsen på ethvert billede ved at bruge følgende forskellige måder:
- Brug af HTML-tag
- Brug af en Inline-stilattribut
- Brug af intern CSS
Brug af HTML-tag
Bemærk: HTML 5 understøtter ikke højde- og breddeattributten for ![]()
, så vi er nødt til at bruge den indbyggede stil-attribut og interne CSS-indstillinger til at ændre billedet eller billedstørrelsen.
Hvis vi ønsker at ændre størrelsen på et billede i dokumentet vha Html tag som skal vises på en webside, skal vi følge nedenstående trin. Ved at bruge disse trin kan vi nemt ændre billedstørrelsen:
Trin 1: For det første skal vi skrive HTML-koden i en hvilken som helst teksteditor eller åbne den eksisterende HTML-fil i teksteditoren, hvor vi vil ændre størrelsen på et billede.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Trin 2: Placer nu markøren inde i img-tagget. Og så skal vi bruge højde- og breddeattributten for img-tagget til at ændre størrelsen på et billede. Så vi skal skrive disse attributter:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Trin 3: Og til sidst skal vi gemme HTML-filen og derefter køre den.
heltal sammenlignet med java
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Test det nu
Outputtet af ovenstående HTML-kode vises på følgende skærmbillede:
Brug af en Inline Style-attribut
Hvis vi ønsker at ændre størrelsen på et billede ved hjælp af en inline-stilattribut, som skal vises på en webside, skal vi følge trinene, som er angivet nedenfor. Ved hjælp af disse trin kan vi nemt ændre billedstørrelsen.
Trin 1: For det første skal vi skrive HTML-koden i en hvilken som helst teksteditor eller åbne den eksisterende HTML-fil i teksteditoren, hvor vi vil bruge stilattributten til at ændre størrelsen på et billede.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Trin 2: Placer nu markøren inde i img tag af det billede, hvis størrelse vi vil ændre. Og så skal vi skrive stil-attributten lige efter src-attributten. Og så skal vi skrive egenskaben bredde og højde i stilattributten, som vist i følgende blok:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Trin 3: Og til sidst skal vi gemme HTML-filen og derefter køre den.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Test det nu
Outputtet af ovenstående HTML-kode er vist i følgende skærmbillede:
Brug af intern CSS
Hvis vi ønsker at ændre størrelsen på et billede eller billede ved hjælp af et internt cascading stylesheet, som skal vises på en webside, skal vi følge trinene, som er angivet nedenfor. Ved at bruge disse trin kan vi nemt ændre størrelsen på ethvert billede.
Trin 1: For det første skal vi skrive HTML-koden i en hvilken som helst teksteditor eller åbne den eksisterende HTML-fil i teksteditoren, hvor vi vil bruge den interne CSS til at ændre størrelsen på et billede.
c# eksempelkode
Change the Size of an image using internal CSS Hello User! <br> This is <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Trin 2: Nu skal vi placere markøren i head-tagget i HTML-dokumentet og derefter definere stilene inde i tag som vist i den følgende blok. Og skriv derefter bredde og højde attribut ind i id-vælgeren.
#imagesize { width:100px; height:100px; } Trin 3: Nu skal vi indtaste id'et i img-tagget for det billede, hvis størrelse vi vil ændre:
Change the Size of an image using internal CSS #imagesize { width:200px; height:200px; } Hello User! <br> This is <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp" id="imagesize"> <br> Test det nu Trin 5: Nu skal vi gemme HTML-filen og derefter køre filen. Følgende skærmbillede viser outputtet af ovenstående HTML-kode:
