HTML <img> bredd egenskap

HTML <img> etikett

Definition och användning

width egenskapen definierar bildens bredd i pixlar.

Tips:att specificera height och width egenskap är en bra vana. Om dessa egenskaper är inställda kan utrymmet för bilden reserveras när sidan laddas. Om dessa egenskaper inte är inställda kan webbläsaren inte känna till bildens storlek och kan inte reservera lämpligt utrymme, vilket innebär att sidans layout ändras när bilden laddas in. (Nästa avsnitt utforskar detta i detalj).

Tips:Varje gång du använder height och width egenskapen för att skalera bilden. Om du använder height och width Om egenskapen används för att förminska bilden måste användaren ladda ner bilder med hög kapacitet (även om bilden ser små ut på sidan). Det korrekta sättet är att förbehandla bilden till lämplig storlek med programvara innan den används på webbsidan.

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

Exempel

En bild med en höjd på 600 pixlar och en bredd på 500 pixlar:

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

Prova det själv

Syntax

<img width="pixels">

Egenskapsvärde

Värde Beskrivning
pixels Specificera bildens bredd i pixlar (t.ex. width="100").

Mer exempel

Ändra bildstorlek - Skapa fyllbilder

Height- och width-egenskaperna har en dold egenskap, det vill säga att det inte är nödvändigt att 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 den reserverade utrymmes storlek. Med detta sätt kan du enkelt skapa miniatyrbilder 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 bevarar den ursprungliga proportionen mellan bredd och höjd, kommer bilden att förvrängas.

En annan teknik med height- och width-egenskaperna är att det är mycket enkelt att fylla en områdesyta på sidan samtidigt som dokumentets prestanda förbättras. Tänk dig att du vill placera en färgad band i dokumentet. Du behöver inte skapa en bild med full storlek, istället 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-egenskaperna 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 procentvärden

En sista teknik med width-egenskapen är att använda procentvärden i stället för absoluta pixlar. Detta gör att webbläsaren skalar bilden i förhållande till visningsfönstret. Därför, om du vill skapa en bredd som matchar 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 storlek ändras, ändras också storleken på denna bild:

Tips:Om en procentformad breddvärde angivs och höjd överges, kommer webbläsaren att behålla bildens förhållande mellan bredd och höjd, oavsett om den förstöras eller förminskas. 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 sätter värdet för width-attributet för bilden ct_1px.gif i procent, får du en rektangulär bild (eftersom den ursprungliga ct_1px.gif är en rektangel med 1px bredd och höjd):


Prova det själv

Tips:Vi tillhandahåller ovanstående exempel för att ge dig en bättre förståelse för användningen av height- och width-attribut. 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-attribut

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

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 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 mycket stor fördröjning i dokumentets visning och bryta läsningen för användaren.

För skapare är ett mer effektivt sätt att specificera storleken på bilden genom att använda height- och width-attribut på <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 attribut måste vara heltal och representera bildstorleken i pixlar. Det spelar ingen roll i vilken ordning dessa attribut visas i <img>-tagget.

Problemen med height- och width-attribut

Trots att <img> taggets height- och width-attribut kan förbättra prestanda och låta dig genomföra några små knep, finns det fortfarande några besvärliga negativa effekter när de används. Även om användaren har inaktiverat 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 indikerar att det är platsen där bilden skulle vara. På detta sätt ser sidan mycket dålig ut, som om den inte är klar, och det mesta av innehållet är utan nytta. Om man inte använder de specificerade dimensionerna, 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 ingen lösning, men vi kan betona att använda alt egenskap ochBeskrivande textSå minst vet läsaren 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.

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