In HTML kunnen we de grootte van elke afbeelding op de volgende verschillende manieren wijzigen:
- HTML-tag gebruiken
- Een inlinestijlattribuut gebruiken
- Interne CSS gebruiken
HTML-tag gebruiken
Opmerking: HTML 5 ondersteunt het height- en width-attribuut van niet ![]()
, dus we moeten het inline stijlkenmerk en interne CSS-opties gebruiken om de afbeeldings- of afbeeldingsgrootte te wijzigen.
Als we de grootte van een afbeelding in het document willen wijzigen met behulp van Html-tag die op een webpagina moet worden weergegeven, moeten we de onderstaande stappen volgen. Met behulp van deze stappen kunnen we eenvoudig de afbeeldingsgrootte wijzigen:
Stap 1: Ten eerste moeten we de HTML-code in een willekeurige teksteditor typen of het bestaande HTML-bestand openen in de teksteditor waarin we de grootte van een afbeelding willen wijzigen.
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>
Stap 2: Plaats nu de cursor in de img-tag. En dan moeten we het height- en width-attribuut van de img-tag gebruiken om de grootte van een afbeelding te wijzigen. We moeten dus deze attributen typen:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Stap 3: En eindelijk moeten we het HTML-bestand opslaan en vervolgens uitvoeren.
lente st
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 het nu
De uitvoer van de bovenstaande HTML-code wordt weergegeven in de volgende schermafbeelding:
Met behulp van een Inline Style-attribuut
Als we de grootte van een afbeelding willen wijzigen met behulp van een inline stijlattribuut dat op een webpagina moet worden weergegeven, moeten we de onderstaande stappen volgen. Met behulp van deze stappen kunnen we eenvoudig de afbeeldingsgrootte wijzigen.
Stap 1: Ten eerste moeten we de HTML-code in een willekeurige teksteditor typen of het bestaande HTML-bestand openen in de teksteditor waarin we het stijlkenmerk willen gebruiken om de grootte van een afbeelding te wijzigen.
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>
Stap 2: Plaats nu de cursor in het img-tag van dat beeld waarvan we de grootte willen veranderen. En dan moeten we het style-attribuut net na het src-attribuut typen. En dan moeten we de eigenschap width en height in het style-attribuut typen, zoals weergegeven in het volgende blok:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Stap 3: En ten slotte moeten we het HTML-bestand opslaan en vervolgens uitvoeren.
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 het nu
De uitvoer van bovenstaande HTML-code wordt weergegeven in de volgende schermafbeelding:
Interne CSS gebruiken
Als we de grootte van een afbeelding of afbeelding willen wijzigen met behulp van een interne trapsgewijze stylesheet die op een webpagina moet worden weergegeven, moeten we de onderstaande stappen volgen. Met behulp van deze stappen kunnen we eenvoudig de grootte van elke afbeelding wijzigen.
Stap 1: Ten eerste moeten we de HTML-code in een willekeurige teksteditor typen of het bestaande HTML-bestand openen in de teksteditor waarin we de interne CSS willen gebruiken om de grootte van een afbeelding te wijzigen.
Hoe download je YouTube-video vlc
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>
Stap 2: Nu moeten we de cursor in de head-tag van het HTML-document plaatsen en vervolgens de stijlen binnen de tag zoals weergegeven in het volgende blok. En typ vervolgens de breedte en hoogte attribuut in de id-kiezer.
#imagesize { width:100px; height:100px; } Stap 3: Nu moeten we de ID typen in de img-tag van de afbeelding waarvan we de grootte willen wijzigen:
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 het nu Stap 5: Nu moeten we het HTML-bestand opslaan en vervolgens het bestand uitvoeren. De volgende schermafbeelding toont de uitvoer van de bovenstaande HTML-code:
