HTML:n <img> -elementin height ja width -ominaisuudet

HTML <img> -elementti

Esimerkki

Aseta kuvan leveys ja korkeus erikseen 200 pikseliin:

<img src="/i/mouse.jpg" height="200" width="200" <img src="/i/ct_1px.gif"

Jos asetat vain kuvan ct_1px.gif leveysominaisuuden prosenttiosuuden, saat nelikulmainen kuvan (tämä johtuu siitä, että alkuperäinen ct_1px.gif on 1px leveä ja korkea):

Määrittely ja käyttö

HTML:n <img> -elementin height ja width -ominaisuudet asettavat kuvan mitat.

Yritä itseOn hyvä tapa määrittää kuvalle height- ja width-ominaisuudet. Jos nämä ominaisuudet on asetettu, selain voi varata tilaa kuvalle sivun lataamisen aikana. Jos näitä ominaisuuksia ei ole asetettu, selain ei tiedä kuvan kokoa ja ei voi varata sopivaa tilaa, joten sivun asettelu muuttuu, kun kuva ladataan.

Yritä itseÄlä skaalaa kuvia height- ja width-ominaisuuksien avulla. Jos pienennät kuvaa näiden ominaisuuksien avulla, käyttäjän täytyy ladata suuri kuvatiedosto (vaikka kuva näyttää pieneltä sivulla). Oikea tapa on käsitellä kuvaa sopivaan kokoon ennen kuin sitä käytetään verkkosivulla.

Lue lisää:height- ja width-ominaisuuksien selitys

Lisää esimerkkejä

Muuta kuvan kokoa - Tee täyttökuva

Height- ja width-ominaisuuksilla on piilotettu ominaisuus, joka tarkoittaa, että ei tarvitse määritellä kuvan todellista kokoa, eli nämä arvot voivat olla suurempia tai pienempiä kuin todellinen koko. Selain säätää kuvan automaattisesti, jotta se sopii varattuun tilaan. Tällä tavalla voidaan helposti luoda suurten kuvien esikatseluita sekä suurentaa pieniä kuvia. On kuitenkin huomattava, että selain ladataan koko tiedoston, riippumatta siitä, kuinka suuri lopullinen näyttökoko on, ja jos alkuperäiset leveys- ja korkeusprofiilit eivät säily, kuva vääristyy.

Height- ja width-ominaisuuksien toinen vinkki on, että voit helposti täyttää sivun alueen ja parantaa asiakirjan suorituskykyä. Kuvittele, että haluat sijoittaa värillisen vaakaleveyden asiakirjaan. Sinun ei tarvitse luoda täysikokoista kuvaa, vaan voit luoda kuvan, jonka leveys ja korkeus ovat molemmat yksi pikseli, ja antaa sille haluamasi värin. Sitten laajenna sitä suurempaan kokoon height- ja width-ominaisuuksien avulla.

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

Tämä on edellä olevan HTML-koodin vaikutus, tämä värikäytävä on valmistettu vain yhden pikselin kuvasta:

Käytä prosenttiosuuksia

Width-ominaisuuden viimeinen vinkki on käyttää prosenttiosuuksia pikseleiden absoluuttisten arvojen sijaan. Tämä mahdollistaa selaimen skaalaavan kuvaa tiettyyn suhteeseen selaimen näyttöikkunan kanssa. Siksi, jos haluat luoda värikäytävän, jonka leveys on sama kuin näyttöikkunan leveys ja korkeus 30 pikseliä, voit tehdä sen näin:

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

Kun asiakirjan ikkunan koko muuttuu, kuvan koko muuttuu sen mukana:

Yritä itseJos annetaan prosenttiosuusmuodossa oleva width-arvo ja unohdetaan height, selain säilyttää kuvan kuvasuhteen sekä suurenemisessa että pienentämisessä. Tämä tarkoittaa, että kuvan korkeuden ja leveyden suhde ei muutu, eikä kuvaa tapahdu vääristymiä.

请看下面的 HTML：

Tarkastele seuraavaa HTML:ää: <img src="/i/ct_1px.gif"

width="20%"

Yritä itse/>Jos asetat vain kuvan ct_1px.gif leveysominaisuuden prosenttiosuuden, saat nelikulmainen kuvan (tämä johtuu siitä, että alkuperäinen ct_1px.gif on 1px leveä ja korkea):Voit kokeilla online-testityökaluissamme

Yritä itse!Vinkki:.

Selaimen tuki

Kaikki selaimet tukevat height- ja width-ominaisuuksia.

Syntaksi

<img height="value" />

tai:

<img width="value" />

Ominaisuuden arvo

Arvo Kuvaus
pixels Pikseleinä ilmaistu korkeus tai leveysarvo.
percent Elementin prosenttiosuuden mukainen korkeus tai leveysarvo.

TIY-esimerkki

Kuvan kokon sopeuttaminen
Tämä esimerkki näyttää, miten kuvia voidaan sopeuttaa eri kokoihin.

height- ja width-ominaisuuksien selitys

Miksi käyttää height- ja width-ominaisuuksia?

Oletko koskaan nähnyt, että dokumentin sisältö siirtyy epäsäännöllisesti, kun se ladataan? Tämä johtuu siitä, että selain mukauttaa sivun asettelua jatkuvasti, jotta se voi näyttää jokaisen ladataan kuvan. Selain ladata ja tulkita kuvien leveyden ja korkeuden määrittääkseen niiden koon, ja sitten varaa vastaavan suuren alueen näyttöikkunassa. Tämä kertoo myös, että kuvat ovat erillisiä tiedostoja, jotka ladataan erikseen alkuperäistiedostosta.

Tämä ei kuitenkaan ole kaikkein tehokkain tapa näyttää dokumenttia, koska selain täytyy tarkistaa ja laskea jokaisen kuvatiedoston näyttötila ennen kuin se näyttää lähempänä olevaa tai seuraavaa dokumenttia. Tämä voi aiheuttaa suurta viivytystä dokumentin näyttämisessä ja häiritä käyttäjän lukemista.

Käyttäjille tehokkaampi tapa on määrittää kuvien koko <img>-elementin height- ja width-ominaisuuksilla. Tällä tavalla selain varaa kuvien sijan ennen kuin ne ladataan, mikä nopeuttaa dokumentin näyttämistä ja estää sisällön liikkumisen. Molemmat ominaisuudet vaativat kokonaislukuarvon ja ne ilmaisevat kuvan koko pikseleinä. Ominaisuuksien järjestys <img>-elementissä ei ole merkitystä.

height- ja width-ominaisuuksien ongelmat

Vaikka <img> -merkin height- ja width-ominaisuudet voivat parantaa suorituskykyä ja antaa sinulle joitakin pieniä vinkkejä, niiden käytössä on myös joitakin monimutkaisia kielteisiä vaikutuksia. Vaikka käyttäjä on sulkenut automaattisen kuvien latauksen, selaaja näyttää edelleen kuvan varattu tila määritetyn kohteen kokoisena. Tämä jättää lukijalle usein tyhjän kehikon, jossa on merkityksetön ikoni, joka osoittaa kuvan sijainnin. Tässä tapauksessa sivu näyttää erittäin huonolta, ja suurin osa sisällöstä on hyödytöntä. Jos et käytä määriteltyjä mittoja, selain sijoittaa kuvan tekstin sisään vain kuvamerkkinä, mikä antaa ainakin jotain tekstiä lukea.

Tälle kysymykseen ei ole vielä ratkaisua, mutta haluamme korostaa yhtä asiaa: käytä alt-ominaisuusjaKuvaileva tekstiTämä tietää, että lukija tietää, mitä täällä puuttuu. Suosittelemme silti käyttämään näitä mittoja, koska kannustamme kaikkea, mikä parantaa verkkosivujen suorituskykyä.

HTML <img> -elementti