De height- en width-eigenschappen van het HTML <img>-tag
Voorbeeld
Stel de breedte en hoogte van het beeld in op respectievelijk 200 pixels:
<img src="/i/mouse.jpg" height="200" width="200" />
Definitie en gebruik
De height- en width-eigenschappen van het <img>-tag stellen de afmetingen van het beeld in.
Tip:Het opgeven van height en width-eigenschappen voor een afbeelding is een goede gewoonte. Als deze eigenschappen zijn ingesteld, kan er tijdens het laden van de pagina ruimte worden gereserveerd voor de afbeelding. Zonder deze eigenschappen kan de browser de maat van het beeld niet vaststellen en kan geen passende ruimte reserveren, waardoor de lay-out van de pagina verandert wanneer de afbeelding wordt geladen. (Hieronder wordt dit punt in detail uitgelegd).
Tip:Schal niet het beeld in via de height en width-eigenschappen. Als het beeld via height en width-eigenschappen wordt verkleind, moet de gebruiker een grote capaciteit afbeelding downloaden (zelfs als de afbeelding op de pagina klein lijkt). De juiste manier is om de afbeelding te verwerken tot de juiste maat met software voordat deze op de pagina wordt gebruikt.
Uitbreiding van de leesstof:Uitleg van height- en width-eigenschappen
Meer voorbeelden
Afbeeldingsgrootte wijzigen - Maak een gevulde afbeelding
Height en width-eigenschappen hebben een verborgen eigenschap, namelijk dat het niet nodig is om de daadwerkelijke grootte van het beeld op te geven, wat betekent dat deze waarden groter of kleiner kunnen zijn dan de daadwerkelijke maat. De browser past het beeld automatisch aan om te passen op de voorziene ruimte. Met deze methode kan het zeer gemakkelijk een miniature van een groot beeld maken, evenals een zeer kleine afbeelding vergroten. Maar let op: de browser moet nog steeds de hele bestand downloaden, ongeacht de uiteindelijke weergavesize, en als de oorspronkelijke verhouding van breedte en hoogte niet wordt behouden, zal het beeld vervormen.
Een andere tip voor het gebruik van de height en width-eigenschappen is dat het zeer gemakkelijk is om een vullend gebied op de pagina te maken, terwijl de prestaties van het document ook kunnen worden verbeterd. Stel je voor dat je een kleurband wilt plaatsen in het document. Je hoeft geen afbeelding van de volledige maat te maken, in plaats daarvan hoef je alleen een afbeelding van 1 pixel breedte en hoogte te maken en de kleur die je wilt gebruiken eraan toe te wijzen. Vervolgens kun je deze met de height en width-eigenschappen uitbreiden tot een grotere maat.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Dit is het effect van het hierbovenstaande HTML, deze kleurband is gemaakt met een afbeelding van slechts één pixel:
Gebruik percentage-waarden
Een laatste tip voor het gebruik van de width-eigenschap is het gebruik van percentage-waarden in plaats van absolute pixels. Dit maakt het mogelijk voor de browser om het beeld te schalen volgens een bepaalde verhouding met het weergavevenster van de browser. Daarom, om een horizontale strip van dezelfde breedte als het weergavevenster met een hoogte van 30 pixels te maken, kan het volgende worden gedaan:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
Wanneer de grootte van het documentvenster verandert, verandert ook de grootte van dit beeld:
Tip:Als een percentage-formaat width-waarde wordt gegeven en height wordt genegeerd, zal de browser de verhouding van breedte en hoogte van het beeld behouden, ongeacht of het wordt vergroot of verkleind. Dit betekent dat de verhouding tussen hoogte en breedte van het beeld niet zal veranderen, en het beeld zal niet vervormen.
Bekijk het volgende HTML:
<img src="/i/ct_1px.gif" width="20%" />
Dus, als u alleen de percent-waarde van de width-eigenschap van het afbeeldingsbestand ct_1px.gif instelt, krijgt u een rechthoekige afbeelding (dus ct_1px.gif is een rechthoek van 1px breed en hoog):
Tip:U kunt het in onze online testtool proberenProbeer het zelf uit!
Tip:We bieden de bovenstaande voorbeelden aan om u beter te laten begrijpen hoe de height- en width-eigenschappen worden gebruikt. Als u alleen grote, egaal gekleurde blokken nodig heeft om de pagina te versieren, is een betere manier om dit te doenGebruik CSS om een achtergrondkleur te maken.
Browserondersteuning
Alle browsers ondersteunen de height- en width-eigenschappen.
Syntaxis
<img height="value" />
of:
<img width="value" />
Eigenschapswaarde
| Waarde | Beschrijving |
|---|---|
| pixels | Hoogte- of breedtewaarden in pixels. |
| percent | Hoogte- of breedtewaarden in percentages van het element. |
TIY Voorbeeld
- Afbeeldingsafmetingen aanpassen
- Dit voorbeeld demonstreert hoe afbeeldingen in verschillende afmetingen kunnen worden aangepast.
Uitleg van height- en width-eigenschappen
Waarom height- en width-eigenschappen gebruiken?
Heeft u ooit gezien hoe de inhoud van een document onregelmatig beweegt wanneer het wordt geladen? Dit komt doordat browsers de layout van de pagina voortdurend aanpassen om elke geladen afbeelding weer te geven. Browsers downloaden en analyseren de breedte en hoogte van de afbeelding om de afmetingen te bepalen, waarna een overeenkomstige rechthoekige ruimte in het weergavevenster wordt gereserveerd. Vervolgens past de browser de weergave van de pagina aan om de afbeelding in te voegen. Dit laat ook zien dat afbeeldingen独立的bestanden zijn die afzonderlijk worden geladen.
Dit is echter niet de meest effectieve manier om een document weer te geven, omdat browsers elke afbeeldingsbestand moeten controleren en hun schermruimte berekenen voordat ze de naaste en achterliggende documentinhoud weergeven. Dit kan een aanzienlijke vertraging in de weergave van het document veroorzaken, wat de leeservaring van de gebruiker kan verstoren.
Voor makers is een effectievere methode om de afmetingen van een afbeelding in te stellen door middel van de height- en width-eigenschappen van de <img>-tag. Op deze manier reserveren browsers een plek voor de afbeelding voordat deze wordt gedownload, wat de weergave van het document versnelt en voorkomt dat de inhoud van het document verschuift. Beide eigenschappen moeten integerwaarden zijn en worden weergegeven in pixels. De volgorde waarin deze eigenschappen in de <img>-tag voorkomen, is niet van belang.
problems with the height and width attributes
Although the height and width attributes of the <img> tag can improve performance and allow you to implement some small tricks, there are still some tricky negative effects when using them. Even if the user has turned off the automatic download of images, the browser still needs to display the space reserved for the image at the specified size. Usually, this leaves the reader with an empty frame, containing a meaningless icon, indicating the position where the image should be placed. At this point, the page will look very bad, as if it has not been completed at all, and most of the content is useless. If these specified sizes are not used, the browser will only place an image icon in the text, so there is at least some text that can be read.
For this issue, we do not have a solution yet, but we can emphasize one point, that is to use alt attributeand someDescriptive textThis way, the reader at least knows what is missing. We still recommend using these size properties because we encourage all behaviors that can improve web performance.
