Hoe de breedte en hoogte van een afbeelding in te stellen met HTML

Schrijver: Tamara Smith
Datum Van Creatie: 26 Januari 2021
Updatedatum: 2 Juli- 2024
Anonim
Image height and width attributes in HTML | HTML5 Tutorial
Video: Image height and width attributes in HTML | HTML5 Tutorial

Inhoud

In dit artikel wordt uitgelegd hoe u de hoogte en breedte van een afbeelding in HTML instelt.

  • Het attribuut "width" stelt de breedte van de afbeelding in (in pixels).
  • Het attribuut "height" stelt de hoogte van de afbeelding in (in pixels).
  • In HTML4.01 kan de hoogte worden ingesteld in pixels of als percentage, maar in HTML5 alleen in pixels.

Stappen

  1. 1 Open het HTML-bestand. Open bijvoorbeeld het bestand default.html.
  2. 2 Voeg de volgende regel toe aan uw HTML-code.
    • img src = "imagefile.webp" alt = "Afbeelding" height = "42" width = "42">
    • src bevat het pad naar het grafische bestand (afbeelding).
    • in alt wordt de grootte van de afbeelding ingesteld.
  3. 3 Vervang de waarden van de hoogte- en breedteattributen door uw gewenste waarden. Bijvoorbeeld als volgt: hoogte = "19" breedte = "20"
  4. 4 Sla het bestand op en open het in een willekeurige webbrowser. Doe dit om te controleren hoe de afbeelding wordt verkleind. Het kenmerk "width" wordt ondersteund door alle belangrijke browsers (Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer).

Tips

  • Stel altijd de hoogte en breedte van de afbeelding in. Dus wanneer de pagina is geladen, is er ruimte gereserveerd voor de afbeelding. Anders weet de browser de grootte van de afbeelding niet en reserveert hij geen ruimte, waardoor de paginalay-out verandert als de pagina wordt geladen.
  • Als de grootte van de grote afbeelding wordt verkleind met behulp van de kenmerken "hoogte" en "breedte", zal de gebruiker de grote afbeelding laden (zelfs als deze klein lijkt op de pagina). Daarom raden we aan om eerst de grootte van de afbeelding in een grafische editor te wijzigen.