HTML <img> height-attributet

HTML <img> etikett

Definition och användning

höjd egenskap definierar bildens höjd i pixlar.

Tips:ange alltid bildens höjd och width-attributet。Om höjd och bredd är inställda, reserveras utrymme för bilden vid sidanladdning av sidan. Om dessa egenskaper inte finns, vet inte webbläsaren bildens storlek och kan inte reservera lämpligt utrymme. Detta leder till att sidans layout förändras under laddningstiden (när bilden laddas).

Tips:använd höjd och bredd Att sänka storleken på en stor bild tvingar användaren att ladda ner en stor bild (även om den ser liten ut på sidan). För att undvika detta, justera storleken på bilden med hjälp av bildbehandlingsprogram innan den används på sidan.

Läs mer:En detaljerad förklaring av height- och width-egenskaperna

Exempel

En bild som är 600 pixlar hög och 500 pixlar bred:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Prova det själv

Syntax

<img height="pixels">

Attributvärde

Värde Beskrivning
pixels Bestäm bildens höjd i pixlar (t.ex. height="100").

Mer exempel

Ändra bildstorlek - Skapa fyllningsbilder

Height- och width-attribut har en dold egenskap, att man inte behöver specificera bildens faktiska storlek, vilket innebär att dessa värden kan vara större eller mindre än den faktiska storleken. Webbläsaren justerar automatiskt bilden så att den passar storleken på den reserverade utrymmet. Genom detta kan det enkelt skapas miniatyrer för stora bilder och förstora små bilder. Men det är viktigt att notera: webbläsaren måste fortfarande ladda hela filen, oavsett hur stor den slutliga visningsstorleken är, och om det inte bevaras det ursprungliga förhållandet mellan bredd och höjd kommer bilden att förvrängas.

En annan teknik med height- och width-attribut är att det är mycket enkelt att fylla en områdeskärm, samtidigt som dokumentets prestanda förbättras. Tänk dig att du vill placera en färgband i dokumentet. Du behöver inte skapa en bild med full storlek, istället kan du skapa en bild med en bredd och höjd på 1 pixel och tilldela den den färg du vill använda. Därefter kan du använda height- och width-attributen för att utöka dess storlek till en större dimension.

<img src="/i/ct_1px.gif"} width="200px" height="30px" />

Detta är effekten av ovanstående HTML, denna färgband är gjord av en bild med bara en pixel:

Använda procentvärden

En sista trick med width-attributet är att använda procentvärden i stället för absoluta pixelvärden. Detta kommer att göra att webbläsaren skalar bilden i förhållande till en viss procent av visningsfönstret. Om du vill skapa en breda bild som har samma bredd som visningsfönstret och en höjd på 30 pixlar, kan du göra det så här:

<img src="/i/ct_1px.gif"} width="60%" height="30px" />

När storleken på dokumentfönstret ändras, ändras också storleken på denna bild:

Tips:Om en procentandel som värde för width ges och height ignoreras, kommer webbläsaren att behålla bildens förhållande mellan bredd och höjd oavsett om den förstöras eller minskas. Detta innebär att förhållandet mellan höjd och bredd kommer att förbli oförändrat, och bilden kommer inte att förvrängas.

Se HTML:n nedan:

<img src="/i/ct_1px.gif"} width="20%" />

Detta innebär att om du bara ställer in width-egenskapen för bilden ct_1px.gif i procent, får du en rektangulär bild (detta beror på att den ursprungliga ct_1px.gif är en rektangel med endast 1px i bredd och höjd):


Prova det själv

Tips:Vi tillhandahåller de ovanstående exemplen för att du bättre ska förstå användningen av height- och width-egenskaperna. Om du bara behöver stora, enfärgade block för att dekorera sidan, är det bättre attAnvänd CSS för att skapa bakgrundsfärg.

En detaljerad förklaring av height- och width-egenskaperna

Varför använda height- och width-egenskaperna

Har du sett att innehållet i dokumentet rör sig oregelbundet när det laddas? Anledningen till detta är att webbläsaren ständigt justerar sidans layout för att kunna visa varje laddad bild. Webbläsaren laddar och analyserar bildens bredd och höjd för att bestämma storleken på bilden och lämnar sedan en motsvarande rektangulär plats i visningsfönstret. Därefter justerar webbläsaren visningen av sidan för att kunna infoga bilden. Detta visar också att bilder är独立的 filer som laddas separat från källfilen.

Detta är dock inte den mest effektiva metoden för att visa dokumentet, eftersom webbläsaren måste kontrollera varje bildfil och beräkna deras skärmspace innan den visar närmaste och efterföljande dokumentinnehåll. Detta kan orsaka mycket stor fördröjning i dokumentets visning och avbryta användarens läsning.

För skapare är ett mer effektivt sätt att specificera storleken på bilden genom att använda height- och width-egenskaperna för <img>-tagget. På detta sätt reserverar webbläsaren plats för bilden innan den laddar den, vilket kan accelerera visningen av dokumentet och undvika att innehållet rör sig. Båda dessa egenskaper måste vara heltal och representera bildstorleken i pixlar. I vilken ordning dessa egenskaper visas i <img>-tagget spelar ingen roll.

Problemen med height- och width-egenskaperna

Trots att <img>-taggets height- och width-egenskaper kan förbättra prestanda och låta dig genomföra några små trick, finns det fortfarande några besvärliga negativa effekter när de används. Även om användaren har stängt av funktionen för automatisk nedladdning av bilder, måste webbläsaren fortfarande visa utrymmet reserverat för bilden med den specificerade storleken. Detta lämnar vanligtvis läsaren med en tom ram, där det finns en meningslös ikon som visar att det är platsen där bilden skulle ha varit. På detta sätt ser sidan mycket dålig ut, som om den inte är klar alls, och det mesta av innehållet är utan nytta. Om man inte använder de specificerade måtten, kommer webbläsaren bara att placera en bildikon i texten, vilket minst ger något att läsa på skärmen.

För detta problem har vi inget lösning, vi kan bara betona en punkt, det är att använda alt-attribut ochBeskrivande textSå att läsaren minst vet vad som saknas här. Vi rekommenderar fortfarande att du använder dessa storleksattribut, eftersom vi uppmuntrar alla beteenden som kan förbättra nätverksprestandan.

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd

HTML <img> etikett