HTML <img>-taggets height och width-attribut
Exempel
Ställ in bildens bredd och höjd till 200 pixlar:
<img src="/i/mouse.jpg" height="200" width="200" />
Definition och användning
Taggen <img> anger storleken på bilden genom att sätta in height och width-attributen.
Tips:Att specificera height- och width-attribut är en bra vana. Om dessa attribut är inställda, kan du reservera utrymme för bilden vid sidans laddning. Om dessa attribut inte är angivna, kan webbläsaren inte förstå bildens storlek och kan inte reservera lämpligt utrymme, vilket leder till att sidans layout ändras när bilden laddas in. (Nästa avsnitt detaljerar detta perspektiv).
Tips:Var inte tvungen att skalera bilder genom att använda height- och width-attribut. Om du skalar ner bilden genom att använda height- och width-attribut, måste användaren ladda ner en stor bild (även om bilden verkar liten på sidan). Det korrekta sättet är att bearbeta bilden till lämplig storlek med programvara innan den används på webbsidan.
Läs mer:Detaljerad förklaring av height- och width-attributen
Mer exempel
Ändra bildstorlek - Skapa fyllbilder
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 in i den reserverade utrymmesstorleken. Med detta sätt kan du enkelt skapa miniatyrer för stora bilder och förstora små bilder. Men var uppmärksam: webbläsaren måste fortfarande ladda hela filen, oavsett hur stor den slutliga visningsstorleken är, och om den inte behåller den ursprungliga bredd-höjd-förhållandet, kommer bilden att förvrängas.
En annan teknik att använda med height och width-attribut är att enkelt fylla i en webbsida och förbättra dokumentets prestanda. Tänk dig att du vill placera en färgband i dokumentet. Du behöver inte skapa en bild med full storlek, utan du behöver bara skapa en bild med en bredd och höjd på 1 pixel och tilldela den den färg du vill använda. Sedan kan du använda height- och width-attributen att utöka den till en större storlek.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Detta är effekten av det ovanstående HTML:et, denna färgband är gjord av en bild med endast en pixel:
Använda procentsatser
En sista teknik att använda med width-attributet är att använda procentsatser i stället för absoluta pixlar. Detta kommer att få webbläsaren att skalera bilden i förhållande till en viss procent av webbläsarens visningsfönster. Därför, om du vill skapa en bredlek som är densamma som visningsfönstrets bredd 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 dokumentfönstret ändrar storlek, ändras också storleken på denna bild:
Tips:Om en procentsatsform av breddvärdet ges och höjden ignoreras, kommer webbläsaren att behålla bildens bredd-höjd-förhållande oavsett om den förstör eller förminskar. Detta innebär att förhållandet mellan bildens höjd och bredd kommer att förbli oförändrat, och bilden kommer inte att förvrängas.
Se nedan HTML:
<img src="/i/ct_1px.gif" width="20%" />
Detta innebär att om du bara ställer in procentvärdet för width-attributet för bilden ct_1px.gif, får du en rektangulär bild (eftersom den ursprungliga ct_1px.gif är en rektangel med 1px bredd och höjd):
Tips:Du kan testa i vår online-testverktygProva själv!
Tips:Vi tillhandahåller de ovanstående exemplen för att hjälpa dig att bättre förstå användningen av height- och width-attributen. Om du bara behöver stora rena färgblock för att dekorera sidan, är det bättre attAnvänd CSS för att skapa bakgrundsfärg.
Webbläsarstöd
Alla webbläsare stöder height- och width-attributen.
Syntax
<img height="value" />
eller:
<img width="value" />
Attributvärde
| Värde | Beskrivning |
|---|---|
| pixels | Höjd eller bredd värde i pixlar. |
| percent | Höjd eller bredd värde i procent av innehållet i elementet. |
TIY-exempel
- Justera bildstorlek
- Detta exempel visar hur man kan justera storleken på bilder till olika mått.
Detaljerad förklaring av height- och width-attributen
Varför använda height- och width-attributen
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, 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 dokument, 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 stor fördröjning i dokumentets visning och bryta användarens läsning.
För skapare är ett mer effektivt sätt att specificera storleken på en bild genom att använda height- och width-attributen i <img>-taggen. På detta sätt reserverar webbläsaren plats för bilden innan den laddas ner, vilket kan accelerera visningen av dokumentet och undvika att innehållet rör sig. Båda dessa attribut måste vara heltal och representera bildstorleken i pixlar. Kvaliteten på att dessa attribut uppstår i <img>-taggen spelar ingen roll.
Problemen med height- och width-attribut
Även om <img> etikettens height- och width-attribut kan förbättra prestandan och låta dig genomföra några små knep, finns det fortfarande några besvärliga negativa effekter när du använder dem. Även om användaren har stängt av funktionen för automatisk nedladdning av bilder, kommer webbläsaren fortfarande att visa det reserverade utrymmet för bilden i den specificerade storleken. Och detta lämnar läsaren ofta med en tom ram, där det finns en meningslös ikon som indikerar att det är platsen där bilden skulle vara. Då ser sidan mycket dålig ut, som om den inte är klar alls, och de flesta innehållet är utan nytta. Om du inte använder de specificerade dimensionerna, kommer webbläsaren endast att placera en bildikon i texten, vilket minst ger något att läsa.
För detta problem har vi inget lösning, men vi kan bara betona att använda alt-attributoch någraBeskrivande textSå att läsaren minst vet vad som saknas här. Vi rekommenderar fortfarande att du använder dessa storleksattribut, eftersom vi uppmuntrar alla åtgärder som kan förbättra nätverksprestandan.
