HTML <img> breedte eigenschap
Definitie en gebruik
width Eigenschap bepaalt de breedte van de afbeelding in pixels.
Tip:Specificeer de height en width Eigenschap is een goede gewoonte. Als deze eigenschappen zijn ingesteld, kan de browser ruimte reserveren voor de afbeelding bij het laden van de pagina. Zonder deze eigenschappen kan de browser de maat van de afbeelding niet vaststellen, waardoor er geen geschikte ruimte wordt gereserveerd. Daarom verandert de lay-out van de pagina wanneer de afbeelding wordt geladen. (Hieronder wordt dit standpunt in detail uitgelegd).
Tip:Mijd het gebruik van height en width Eigenschap om de afbeelding te skaleren. Als je height en width Als je de afbeelding kleiner wilt maken, moet de gebruiker de grote afbeelding downloaden (zelfs als de afbeelding op de pagina klein lijkt). De juiste manier is om de afbeelding voor gebruik op de website te verwerken tot de juiste maat met software.
Meer lezen: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 width="pixels">
Eigenschapswaarde
| Waarde | Beschrijving |
|---|---|
| pixels | Stel de breedte van het beeld in, in pixels (bijvoorbeeld width="100"). |
Meer voorbeelden
Beeldgrootte wijzigen - Maak een invulafbeelding
Height en width-eigenschappen hebben een verborgen eigenschap, namelijk dat men 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 om aan te passen aan de voorziene ruimte. Met deze methode kan men 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 truc met de height en width-eigenschappen is het gemakkelijk invullen van een gebied op de pagina, terwijl de prestaties van het document ook 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 kun je een afbeelding van 1 pixel breed en hoog maken en de kleur toekennen die je wilt gebruiken. 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 bovenstaande HTML, deze kleurband is gemaakt met een afbeelding van slechts één pixel:
Gebruik percentage-waarden
Een laatste truc met de width-eigenschap is het gebruik van percentage-waarden in plaats van absolute pixels. Dit zorgt ervoor dat de browser het beeld schaalt naar een bepaalde verhouding met het scherm van de browser. Daarom, om een horizontale strip van dezelfde breedte als het scherm met een hoogte van 30 pixels te maken, 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-formaat 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 de 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 width-eigenschap van de afbeelding ct_1px.gif instelt in percentage, krijg je een rechthoekige afbeelding (dus ct_1px.gif is oorspronkelijk een rechthoek met een breedte en hoogte van 1px):
Tip:We bieden de bovenstaande voorbeelden aan om je beter te laten begrijpen hoe height- en width-eigenschappen worden gebruikt. Als je alleen een groot oppervlak van een egaal kleurblok nodig hebt om de pagina te versieren, is een betere manier 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 omdat de browser de lay-out van de pagina voortdurend aanpast om elke geladen afbeelding weer te geven. De browser downloadt en parseert de breedte en hoogte van de afbeelding om de grootte 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独立的bestanden zijn die afzonderlijk worden geladen.
Dit is echter niet de meest effectieve manier om een document weer te geven, omdat de browser elke afbeeldingsbestand moet controleren en hun schermruimte berekenen voordat hij de nabijgelegen en achterliggende inhoud van het document weergeeft. Dit kan een zeer grote vertraging bij het weergeven van het document veroorzaken, wat de leeservaring van de gebruiker kan verstoren.
Voor makers is een effectievere methode om de afmetingen van de afbeelding in te stellen via de height- en width-eigenschappen van de <img>-tag. Op deze manier reserveert de browser een positie voor de afbeelding voordat deze wordt gedownload, waardoor de weergave van het document kan worden versneld en het verplaatsen van de inhoud van het document kan worden voorkomen. Beide eigenschappen moeten hele waarden zijn en worden weergegeven in pixels. De volgorde waarin deze eigenschappen in de <img>-tag voorkomen, is niet van belang.
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, zal de browser toch de ruimte voor de afbeelding in de opgegeven maat moeten weergeven. Dit leidt meestal tot een lege frame voor de lezer, waarin een zinloze pictogram wordt weergegeven, wat aangeeft dat dit de plek is waar de afbeelding zou moeten zijn. Op dit moment ziet de pagina er erg slecht uit, net alsof hij niet is voltooid, en de meeste inhoud is nutteloos. Als je geen specifieke maat instelt, zal de browser slechts een afbeeldingspictogram plaatsen in de tekst, waardoor er ten minste nog tekst te lezen is.
For this issue we do not have a solution, we can only emphasize one point, that is to use alt attribute and someDescriptive textSo that the reader at least knows what is missing here. We still recommend using these size attributes because we encourage all behaviors that can improve web performance.
Browser support
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
