HTML <img> width 属性

HTML <img> tag

定义和用法

width 属性规定图像的宽度，以像素为单位。

Ved为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。

Ved请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width Hvis brugeren skal缩放图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。

Læs mere:Detaljeret om height og width egenskaber

Eksempel

Et billede på 600 pixel højde og 500 pixel bredde:

<img src="img_girl.jpg" alt="Pige i jakke" width="500" height="600">

Prøv det selv

Syntaks

<img width="pixels">

Attributværdi

Værdi Beskrivelse
pixels Angiv billedets bredde i pixel (f.eks. width="100").

Flere eksempler

Ændre billedstørrelse - Opret fyldte billeder

Height og width-attributter har en skjult egenskab, nemlig at man ikke nødvendigvis skal specificere billedets faktiske størrelse, hvilket betyder, at disse værdier kan være større eller mindre end den faktiske størrelse. Browseren justerer automatisk billedet, så det passer til den reserverede plads. Ved denne metode kan man nemt oprette miniaturebilleder til store billeder og forstørre små billeder. Men det skal bemærkes: browseren skal stadig downloade hele filen, uanset hvor stor den endelige visning er, og hvis det oprindelige bredde og højdeforhold ikke bevares, vil billedet blive vrøvlende.

En anden teknik med height og width-attributter er at nemt udfylde et område på siden og samtidig forbedre dokumentets ydeevne. Forestil dig, at du vil placere en farvet bane i dokumentet. Du behøver ikke at oprette et billede med fuld størrelse, i stedet skal du oprette et billede med en bredde og højde på 1 pixel og tildel den den farve, du ønsker at bruge. Derefter kan du udvide det til en større størrelse ved hjælp af height og width-attributter.

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

Dette er effekten af det ovenstående HTML, og denne farvebånd er lavet med et enkelt pixels billede:

Brug af procentværdier

En sidste trick med width-attributten er at bruge procentværdier i stedet for absolutte pixelværdier. Dette vil få browseren til at skalere billedet i forhold til en bestemt procentdel af browserens visningsvindue. Derfor, hvis du vil oprette en bredde, der matcher visningsvinduets bredde og en højde på 30 pixel, kan du gøre det på denne måde:

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

Når dokumentvinduets størrelse ændres, ændres også billedets størrelse:

VedHvis en procentvis width-værdi er angivet og height ignoreres, vil browseren enten forstørre eller formindske billedet, mens billedets højde og breddeforhold forbliver uændret. Dette betyder, at billedets højde ikke ændres i forhold til bredden, og billedet vil ikke blive vrøvlende.

Se nedenstående HTML:

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

Det vil sige, hvis du kun indstiller width-procentværdien for billedet ct_1px.gif, får du et rektangulært billede (fordi det oprindelige ct_1px.gif er et rektangel med en bredde og højde på 1px):


Prøv det selv

VedVi giver de ovennævnte eksempler for at hjælpe dig med at forstå brugen af height og width egenskaber bedre. Hvis du kun har brug for store, ensfarvede blokke til at dekorere siden, er det bedre atBrug CSS til at oprette baggrundsfarve.

Detaljeret om height og width egenskaber

Hvorfor bruge height og width egenskaber

Har du set, hvordan indholdet i et dokument kan bevæge sig uregelmæssigt, når det indlæses? Dette skyldes, at browseren konstant justerer sidens layout for at kunne vise hvert enkelt indlæst billede. Browseren downloader og analyserer billedets bredde og højde for at bestemme størrelsen, og lader derefter en passende rektangulær plads i visningsvinduet. Derefter justerer browseren sidens visningslayout for at kunne indsætte billedet. Dette viser også, at billeder er separate filer, der hver især downloades.

Dette er dog ikke den mest effektive måde at vise dokumentet på, fordi browseren skal kontrollere hver enkelt billedfil og beregne deres skærmspace, før den viser de næste og efterfølgende dokumentindhold. Dette kan medføre betydelige forsinkelser i dokumentets visning, hvilket kan afbryde brugerens læsning.

For skabere er en mere effektiv metode at specificere billedets størrelse gennem <img> tags height og width egenskaber. På denne måde reserverer browseren pladsen for billedet, før det downloades, hvilket kan accelerere visningen af dokumentet og undgå flytning af dokumentets indhold. Begge egenskaber kræver hele værdier og repræsenterer billedets størrelse i pixels. Rækkefølgen af disse egenskaber i <img> tags er ligegyldig.

Problemer med height og width egenskaber

Selvom <img> tags height og width egenskaber kan forbedre ydeevnen og lade dig udføre nogle små trick, er der stadig nogle svære negative effekter ved deres brug. Selvom brugeren har slået automatisk download af billeder fra, vil browseren stadig vise det reserverede rum for billederne med den specificerede størrelse. Dette efterlader ofte læseren med en tom ramme, der indeholder en meningsløs ikon, der symboliserer, at der er plads til et billede. På dette tidspunkt vil siden se meget dårlig ud, som om den ikke er færdig, og det meste af indholdet er uden brug. Hvis man ikke bruger de specificerede mål, vil browseren kun placere et billedeikon i teksten, hvilket mindst giver nogle ord at læse.

For dette problem har vi ingen løsning, men vi kan kun understrege, at du skal bruge alt egenskab ogBeskrivende tekstPå denne måde ved læseren mindst, hvad der mangler her. Vi anbefaler stadig at bruge disse størrelsesegenskaber, fordi vi opfordrer til alt, der kan forbedre netværksydelsen.

Browserstøtte

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <img> tag