De lengte en breedte van een afbeelding instellen met HTML

PDF download Pdf downloaden
PDF download Pdf downloaden

Deze wikiHow legt je uit hoe je de hoogte een breedte van een afbeelding instelt met HTML (HyperText Markup Language).

  • De ‘width’ geeft de breedte van een afbeelding in pixels aan.
  • De ‘height’ geeft de hoogte van een afbeelding in pixels aan.
  • In HTML 4.01 kan de hoogte worden gedefinieerd in pixels of in percentages. In HTML5 moet de waarde in pixels zijn.

Stappen

PDF download Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6c\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6c\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    bijvoorbeeld: default.html
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • <img src="imagefile.jpg" alt="Image" height="42" width="42">
    • src is het bestandspad naar je afbeelding.
    • alt is het label dat je je afbeelding geeft.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2c\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2c\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Het attribuut ‘width’ wordt ondersteund in alle belangrijke browsers zoals Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer enz.
    Advertentie

Tips

  • Geef altijd de hoogte- en breedtekenmerken op voor afbeeldingen. Als de hoogte en breedte zijn ingesteld, wordt de benodigde ruimte voor de afbeelding gereserveerd wanneer de pagina wordt geladen. Zonder deze attributen weet de browser echter niet de grootte van de afbeelding en kan er geen geschikte ruimte voor worden gereserveerd. Het effect hiervan is dat de pagina-indeling tijdens het laden verandert (terwijl de afbeeldingen worden geladen).
  • Het verkleinen van een grote afbeelding door middel van de hoogte en breedte aan te passen dwingt een gebruiker om de grote afbeelding te downloaden (zelfs als deze er klein uitziet op de pagina). Om dit te voorkomen, moet je de afbeelding opnieuw schalen met een programma voordat je deze op een pagina plaatst.
Advertentie

Gerelateerde artikelen

XML bestanden openen
De kleur van tekst in HTML veranderen
Spaties in HTML toevoegen
De broncode van een webpagina bekijken
Commentaar toevoegen aan HTML
Notepad gebruiken
Een computerprogramma maken
De hex code van een kleur achterhalen op je computer
Een onschuldig virus creëren
Programmeren in Python
Een php‐bestand openen
Een SQL Server database maken
Gegevens toevoegen aan een draaitabel in Excel
Een e‐maillink in HTML maken
Advertentie

Bronnen

  1. http://www.w3schools.com/ - Find all information about HTML in here.

Over dit artikel

In andere talen
Deze pagina is 6.477 keer bekeken.

Was dit artikel nuttig?

Advertentie