De lengte en breedte van een afbeelding instellen met HTML

Pdf downloaden
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 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

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

Bronnen

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

Over dit artikel

In andere talen
Deze pagina is 5.628 keer bekeken.

Was dit artikel nuttig?

Advertentie