HTML <img> hoogte-eigenschap
Definitie en gebruik
hoogte eigenschap op voor het beeld, aangegeven in pixels.
Tip:Geef altijd de hoogte en width-eigenschap。Als hoogte en breedte zijn ingesteld, wordt er tijdens het laden van de pagina ruimte gereserveerd voor het beeld. Anders, als deze eigenschappen ontbreken, weet de browser niet hoe groot het beeld is en kan hij geen passende ruimte reserveren. Dit kan leiden tot veranderingen in de lay-out van de pagina tijdens het laden (wanneer het beeld wordt geladen).
Tip:gebruik hoogte en breedte Het verkleinen van een groot beeld dwingt gebruikers om het grote beeld te downloaden (zelfs als het op de pagina klein lijkt). Om dit te voorkomen, pas je de afbeelding aan met behulp van afbeeldingsverwerkingssoftware voordat je het op de pagina gebruikt.
Uitgebreide informatie:Uitleg van height en width-eigenschappen
Voorbeeld
Een afbeelding van 600 pixels hoog en 500 pixels breed:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Syntaxis
<img height="pixels">
Eigenschapswaarde
| Waarde | Beschrijving |
|---|---|
| pixels | Stel de hoogte van het beeld in, uitgedrukt in pixels (bijvoorbeeld height="100"). |
Meer voorbeelden
Beeldgrootte wijzigen - Maak een vullende afbeelding
De height en width-eigenschappen hebben een verborgen eigenschap, namelijk dat je de daadwerkelijke grootte van het beeld niet hoeft op te geven, wat betekent dat deze waarden groter of kleiner kunnen zijn dan de werkelijke maat. De browser past het beeld automatisch aan, zodat het past in de voorziene ruimte. Met deze methode kun je 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, kan het beeld vervormen.
Een andere vaardigheid van de height en width-eigenschappen is dat je zeer gemakkelijk de vulling van een pagina-gebied kunt realiseren, terwijl je ook de prestaties van het document kunt verbeteren. Stel je voor dat je een kleurband wilt plaatsen in het document. Je hoeft geen afbeelding van de volledige afmeting te maken, in plaats daarvan maak je een afbeelding van 1 pixel breed en hoog, en je geeft de kleur die je wilt gebruiken aan. Vervolgens kun je de afbeelding met de height en width-eigenschappen uitbreiden naar een grotere maat.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
Dit is het effect van het bovenstaande HTML, de kleurband is gemaakt van een afbeelding met 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 naar een bepaalde verhouding met het schermvenster. Daarom, om een horizontale strip van dezelfde breedte als het schermvenster te maken, met een hoogte van 30 pixels, kan je het volgende doen:
<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-gewijze width-waarde wordt gegeven en height wordt genegeerd, zal de browser, ongeacht het vergroten of verkleinen, de verhouding van de breedte en hoogte van het beeld behouden. Dit betekent dat de verhouding tussen de hoogte en breedte van het beeld niet zal veranderen, en het beeld zal niet vervormen.
Bekijk onderstaande HTML:
<img src="/i/ct_1px.gif"} width="20%" />
Dus, als je alleen de percentwaarde van de width-eigenschap van de afbeelding ct_1px.gif instelt, krijg je een rechthoekige afbeelding (dus de oorspronkelijke ct_1px.gif is een rechthoek van 1px breed en hoog):
Tip:We bieden de bovenstaande voorbeelden om je beter te laten begrijpen hoe height en width-eigenschappen worden gebruikt. Als je alleen een groot gebied met een egaal kleurenblok nodig hebt om de pagina te versieren, is het beter omGebruik CSS om een achtergrondkleur te maken.
Uitleg van height en width-eigenschappen
Waarom height en width-eigenschappen gebruiken
Heb je ooit gezien hoe de inhoud van een document onregelmatig beweegt wanneer het wordt geladen? Dit komt doordat de browser voortdurend de lay-out van de pagina aanpast om elke geladen afbeelding weer te geven. De browser downloadt en analyseert de breedte en hoogte van de afbeelding om de maat van de afbeelding te bepalen, waarna een overeenkomstige rechthoekige ruimte in het weergavevenster wordt gelaten. Vervolgens past de browser de weergave van de pagina aan om de afbeelding in te voegen. Dit laat ons ook zien dat afbeeldingen afzonderlijke bestanden zijn die afzonderlijk worden geladen.
Dit is echter niet de meest effectieve manier om een document te weergeven, omdat de browser voor het weergeven van de nabijgelegen en achterliggende inhoud van het document elke afbeeldingsbestand moet controleren en hun schermruimte berekenen. Dit kan een zeer grote vertraging bij het weergeven van het document veroorzaken, wat de leeservaring van de gebruiker kan verstoren.
Voor creators is een effectievere methode om de maat van de afbeelding in te stellen via de height- en width-eigenschappen van de <img>-tag. Op deze manier reserveert de browser een plek voor de afbeelding voordat deze wordt gedownload, waardoor de weergave van het document kan worden versneld en de verplaatsing van de inhoud van het document kan worden voorkomen. Beide eigenschappen moeten integerwaarden zijn en worden weergegeven in pixels. De volgorde waarin deze eigenschappen in de <img>-tag voorkomen, is niet belangrijk.
Problemen met de height- en width-eigenschappen
Hoewel de height- en width-eigenschappen van de <img>-tag de prestaties kunnen verbeteren en je enkele kleine trucs kunnen laten uitvoeren, zijn er toch enkele lastige negatieve effecten bij het gebruik ervan. Zelfs als de gebruiker de functie van automatisch downloaden van afbeeldingen heeft uitgeschakeld, moet de browser nog steeds de ruimte die is gereserveerd voor de afbeelding weergeven in de opgegeven maat. Dit leidt meestal tot een lege frame voor de lezer, waarin een zinloze pictogram wordt weergegeven, wat aangeeft dat dit de plaats is waar de afbeelding zou moeten worden geplaatst. Op dit moment ziet de pagina er zeer slecht uit, net alsof hij nog niet is voltooid, en de meeste inhoud is nutteloos. Als je geen specifieke maat gebruikt, zal de browser alleen een afbeeldingspictogram plaatsen in de tekst, waardoor er ten minste nog enkele woorden te lezen zijn.
Voor dit probleem hebben we nog geen oplossing, maar we willen graag benadrukken dat je moet proberen alt eigenschap enBeschrijvende tekstOp deze manier weet de lezer ten minste wat ontbreekt. We raden je nog steeds aan om deze afmetingseigenschappen te gebruiken, omdat we elke actie die de prestaties van het net verbetert, aanmoedigen.
Browserondersteuning
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Ondersteuning | Ondersteuning | Ondersteuning | Ondersteuning | Ondersteuning |
