HTML <img> højde egenskab
Definition og brug
højde Egenskaben bestemmer billedets højde i pixel.
VedAngiv altid bredde for billedet højde og width-egenskab。Hvis højde og bredde er indstillet, vil der blive reserveret plads til billedet ved siden af siden, når siden indlæses. Hvis ikke disse egenskaber er til stede, ved browseren ikke billedets størrelse og kan derfor ikke reservere passende plads. Dette vil føre til, at sidens layout ændrer sig under indlæsning (når billedet indlæses).
Vedbrug højde og bredde At skræmme brugeren til at downloade et stort billede tvangsmæssigt (selvom det ser lille ud på siden). For at undgå dette skal du bruge billedbehandlingssoftware til at justere billedets størrelse, før det bruges på siden.
Læs mere:Detaljeret forklaring af height og width egenskaber
Eksempel
Et billede på 600 pixel højde og 500 pixel bredde:
<img src="img_girl.jpg" alt="Pige i en jakke" width="500" height="600">
Syntaks
<img height="pixels">
Egenskabsværdi
| Værdi | Beskrivelse |
|---|---|
| pixels | Angiv billedets højde i pixel (f.eks. height="100"). |
Flere eksempler
Ændre billedstørrelse - Opret fyldige billeder
Height- og width-egenskaberne 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 oprettes miniaturer af store billeder samt 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 højde-bredde-forhold ikke bevares, vil billedet blive vrideret.
En anden teknik med height- og width-egenskaberne er, at det er meget nemt at fylde et område på siden, samtidig med at det forbedrer dokumentets ydeevne. Forestil dig, at du vil placere en farvestrib i dokumentet. Du behøver ikke at skabe et billede med fuld størrelse, men i stedet oprette et billede med en bredde og højde på 1 pixel og tildel den den farve, du ønsker. Derefter kan du udvide det til større dimensioner ved hjælp af height- og width-egenskaberne.
<img src="/i/ct_1px.gif" width="200px" height="30px" */
Dette er effekten af det ovenstående HTML, og denne farvestrib er lavet med et billede, der kun har én pixel:
Brug af procentværdier
En sidste trick med width-egenskaben 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:
VedHvis en procentværdi for width er givet og height ignoreres, vil browseren enten forstørre eller formindre billedet, men vil altid holde billedets højde-bredde-forhold konstant. Dette betyder, at billedets højde i forhold til bredden vil forblive uændret, og billedet vil ikke blive vrideret.
Se nedenstående HTML:
<img src="/i/ct_1px.gif" width="20%" */
Dvs., hvis du kun indstiller billedets ct_1px.gif width egenskabsprocentværdi, får du et rektangulært billede (fordi det oprindelige ct_1px.gif er et rektangel med 1px bredde og højde):
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 forklaring af height og width egenskaber
Hvorfor bruge height og width egenskaber
Har du set, hvordan indholdet bevæger sig uregelmæssigt, når dokumentet indlæses? Dette skyldes, at browseren konstant justerer sidens layout for at kunne vise hvert laden billede. Browseren downloade og analyserer billedets bredde og højde for at bestemme billedets størrelse og lader dermed 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 føre til betydelige forsinkelser i visningen af dokumentet, 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 visning af dokumentet og undgå flytning af dokumentets indhold. Begge egenskaber kræver hele tal og repræsenterer billedets størrelse i pixels. Rækkefølgen af disse egenskaber i <img> tagget 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 billedet med den angivne størrelse. Dette efterlader ofte læseren med en tom ramme, hvor der er en meningsløs ikon, der symboliserer, at der er en billedplads. 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 man ikke bruger de angivne mål, vil browseren kun placere et billedikon i teksten, hvilket mindst giver nogle ord at læse.
For dette problem har vi endnu ingen løsning, men vi kan kun understrege, at man skal bruge alt egenskab ogBeskrivende tekstPå denne måde ved læseren mindst, hvad der mangler her. Vi anbefaler dog stadig at bruge disse størrelsesegenskaber, fordi vi opfordrer til alt, der kan forbedre netværksydeevnen.
Browser support
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
