HTML <img> tags height og width egenskaber
Eksempel
Indstil billedets bredde og højde til 200 pixels:
<img src="/i/mouse.jpg" height="200" width="200" />
Definition og brug
Brug af <img> tags height og width egenskaber til at indstille billedets størrelse.
Tip:At specificere height og width-eegenskaber for billeder er en god vane. Hvis disse egenskaber er sat, kan der reserveres plads til billedet ved siden af sideindlæsning. Hvis de ikke er til stede, kan browseren ikke finde ud af billedets størrelse og kan derfor ikke reservere passende plads, hvilket resulterer i, at sidens layout ændres, når billedet indlæses.（以下将详细解释这一观点）
Tip:Undgå at skalere billeder gennem height og width-eegenskaber. Hvis billeder skaleres gennem height og width-eegenskaber, skal brugeren downloade et stort billedformat (selvom billedet ser lille ud på siden). Det korrekte er at behandle billedet til den ønskede størrelse med software, før det bruges på websiden.
Udvidende læsning:Detaljer om height- og width-attributter
Flere eksempler
Ændre billedstørrelse - Opret fyldte billeder
Height og width-eegenskaberne 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 det 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 vrideret.
En anden teknik med height og width-eegenskaberne er at nemt kunne fylde et område på siden, samtidig med at de forbedrer dokumentets ydeevne. Forestil dig, at du vil placere en farvet bånd i dokumentet. Du behøver ikke at skabe et billede med fuld størrelse, i stedet skal du skabe 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-eegenskaberne.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Dette er effekten af det ovenstående HTML, denne farvebånd er lavet af et billede med kun én pixel:
Brug af procentværdier
En sidste trick med width-eegenskaben er at bruge procentværdier i stedet for absolutte pixelværdier. Dette vil få browseren til at skalere billedet i forhold til browserens visningsvindue. Derfor, hvis du vil skabe 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:
Tip:Hvis en procentvis værdi for width er angivet og height ignoreres, vil browseren enten forstørre eller forsmåre billedet, men vil altid holde billedets bredde-højde-forhold. Dette betyder, at billedets højde og breddeforhold vil forblive uændret, og billedet vil ikke blive vrideret.
Se nedenstående HTML:
<img src="/i/ct_1px.gif" width="20%" />
Det vil sige, hvis du kun sætter ct_1px.gif's width-attribut i procent, får du et rektangulært billede (fordi ct_1px.gif er en rektangel med en bredde og højde på 1px):
Tip:Du kan prøve det i vores online testværktøjPrøv det selv!
Tip:Vi giver dig de ovennævnte eksempler for at hjælpe dig med at forstå brugen af height- og width-attributter bedre. Hvis du kun har brug for store, ensfarvede blokke til at dekorere siden, er det bedre atBrug CSS til at oprette baggrundsfarve.
Browserunderstøttelse
Alle browsere understøtter height- og width-attributter.
Syntaks
<img height="value" />
eller:
<img width="value" />
Attributværdi
| Værdi | Beskrivelse |
|---|---|
| pixels | Højde eller bredde værdier i pixels. |
| percent | Højde eller bredde værdier i procent af elementets indhold. |
TIY Eksempel
- Justér billedets størrelse
- Dette eksempel viser, hvordan man kan justere billedets størrelse til forskellige dimensioner.
Detaljer om height- og width-attributter
Hvorfor bruge height- og width-attributter
Har du set, hvordan indholdet bevæger sig uregelmæssigt, når et dokument indlæses? Årsagen er, at browseren konstant justerer sidens layout for at kunne vise hvert indlæst billede. Browseren downloader og analyserer billedets bredde og højde for at bestemme størrelsen, og derefter lader den 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 indlæses.
Dette er dog ikke den mest effektive metode til at vise et dokument, 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 føre til betydelige forsinkelser i dokumentets visning, hvilket kan afbryde brugerens læsning.
For skabere er en mere effektiv metode at specificere billedets størrelse ved hjælp af <img>-tags height- og width-attributter. På denne måde reserverer browseren pladsen for billedet, før det downloades, hvilket accelererer dokumentets visning og undgår flytning af dokumentets indhold. Begge attributter kræver hele tal og vises i pixels. Rækkefølgen af disse attributter i <img>-tags er ligegyldig.
Problemer med height og width egenskaber
Selvom <img> etiketens height og width egenskaber kan forbedre ydeevnen og lade dig udføre nogle små trick, er der stadig nogle svære negative effekter, når de bruges. Selvom brugeren har slået automatisk download af billeder fra, vil browseren stadig vise det reserverede rum for billedet i den specificerede størrelse. Dette efterlader ofte læseren med en tom ramme, hvor der er en meningsløs ikon, der symboliserer, at dette er stedet for billedet. På dette tidspunkt ser siden meget dårlig ud, som om den ikke er færdig, og det meste af indholdet er uden brug. Hvis de specificerede størrelser ikke bruges, vil browseren kun placere en billedikon i teksten, hvilket mindst giver nogle ord at læse.
For dette problem har vi endnu ikke en løsning, men vi kan kun understrege, at man skal bruge alt egenskabog nogleBeskrivende tekstPå denne måde ved læseren mindst, hvad der mangler her. Vi anbefaler stadig at bruge disse størrelsesattributter, fordi vi opfordrer til alt, der kan forbedre netværksydeevnen.
