HTML Afbeeldingen

HTML <img> width attribuut

  • Het width attribuut specificeert de breedte van een afbeelding.
  • De waarde kan uitgedrukt worden in pixels, of als percentage van de beschikbare ruimte.

Attribuut voorbeeld

<html>
<body>
<img alt="logo" src="html-totaal.png" height="100" width="250" border="1">
</body>
</html>
logo

Verschil HTML - XHTML

Het img element moet correct worden afgesloten in XHTML.

naar boven 

tip

Het is een goede gewoonte om steeds de hoogte en de breedte van een afbeelding te specificeren.

Wanneer niet gelijktijdig het height attribuut is opgenomen, wordt de hoogte in dezelfde verhouding als de breedte gewijzigd.

  • Wanneer deze attributen voorhanden zijn kan de benodigde ruimte voor de afbeelding worden gereserveerd.
  • Bij het ontbreken van de afmetingen zal de layout van de pagina steeds wijzigen tijdens het downloaden van de afbeelding !

Attribuut waarde

Waarde Beschrijving
pixels De breedte van de afbeelding in pixels.
% De breedte van de afbeelding in percentage van de beschikbare hoogte in het element.

naar boven 

nota

Internet Explorer ondersteunt geen percentage voor de breedte.
De breedte wordt berekend vanuit de hoogte, waarbij de oorspronkelijke hoogte/breedte verhouding wordt aangehouden !

tip

Het verkleinen van een grote afbeelding dmv de width en height attributen, dwingt de bezoeker de grote afbeelding te downloaden (ook al wordt ze klein getoond in de browser) !

  • Gebruik een resizer (herschaal) programma vooraleer de afbeelding op uw pagina te plaatsen !

Opbouw

<img src="url" height="px of %" width="px of %"> In HTML
<img src="url" height="px of %" width="px of %" /> In XHTML

naar boven 

tip

Ook met CSS kunnen de afmetingen van een afbeelding worden bepaald !

Browser ondersteuning

Internet Explorer Firefox Chrome Opera Safari

  • Het <img> width attribuut wordt ondersteunt in de bekende browsers.
naar boven naar boven naar hspace attribuut
naar boven naar het hspace attribuut