HTML <img> height-ominaisuus
Määrittely ja käyttö
korkeus
ominaisuus määrittää kuvan korkeuden pikseleissä.
Vinkki:Määritä aina kuvalle korkeus
ja width-ominaisuus。Jos korkeus ja leveys on asetettu, sivu varaa kuvan tarvitseman tilan latauksen aikana. Jos näitä ominaisuuksia ei ole, selain ei tiedä kuvan kokoa eikä voi varata sopivaa tilaa sille. Tämä aiheuttaa sivun asettelun muuttuvan ladatessa (kun kuva ladataan).
Vinkki:käytetään korkeus
ja leveys
Ominaisuus pienentää suurta kuvaa pakottaa käyttäjän ladata suuren kuvan (vaikka se näyttää pieneltä sivulla). Välttääksesi tämän, muuta kuvan kokoa kuvankäsittelyohjelmistolla ennen kuin käytät sitä sivulla.
Lue lisää:Height- ja width-ominaisuuksien yksityiskohtainen selitys
Esimerkki
Kuva, joka on korkeudeltaan 600 pikseliä ja leveydeltään 500 pikseliä:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Syntaksi
<img height="pixels">
Ominaisuusarvo
Arvo | Kuvaus |
---|---|
pixels | Määritä kuvan korkeus pikseleinä (esim. height="100"). |
Lisää esimerkkejä
Muuta kuvan kokoa - Tee täyttökuva
Height ja width -ominaisuuksilla on piilotettu ominaisuus, 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 esikatselut ja 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 korkeus suhteet eivät säily, kuva venytetään.
Height ja width -ominaisuuksilla on toinen taito, joka mahdollistaa helposti sivun alueen täyttämisen samalla parantaen asiakirjan suorituskykyä. Kuvittele, että haluat sijoittaa väripalkin asiakirjaan. Sinun ei tarvitse luoda täysikokoista kuvaa, vaan voit luoda kuvan, jonka leveys ja korkeus ovat molemmat 1 pikseliä, ja antaa sille haluamasi värin. Sitten laajenna sitä suurempaan mittoihin height- ja width-ominaisuuksilla.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
Tämä on yllä olevan HTML-koodin vaikutus, tämä väripalkki on tehty vain yhden pikselin kuvasta:

Käytä prosenttiosuuksia
Width-ominaisuuden viimeinen vinkki on käyttää prosenttiosuuksia pikseleiden absoluuttisten arvojen sijaan. Tämä saa selain skaalautumaan kuvaa tiettyyn suhteeseen selaimen näyttöikkunan kanssa. Siksi, jos haluat luoda värillisen palkin, jonka leveys on sama kuin näyttöikkunan leveys ja korkeus 30 pikseliä, voit tehdä sen näin:
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
Kun asiakirjan ikkunan koko muuttuu, kuvan koko muuttuu sen mukana:

Vinkki:Jos annetaan prosenttiosuuden width-arvo ja height jätetään huomiotta, selain säilyttää kuvan leveyden ja korkeuden suhteen sekä suurenemisessa että pienentyessä. Tämä tarkoittaa, että kuvan korkeuden ja leveyden suhde ei muutu, eikä kuvaa venytetä.
Tarkkaile alla olevaa HTML:ää:
<img src="/i/ct_1px.gif"} width="20%" />
Esimerkiksi, jos asetetaan kuvan ct_1px.gif width-ominaisuuden prosenttiosuus, saadaan suorakulmainen kuvagalleria (tämä johtuu siitä, että alkuperäinen ct_1px.gif on vain 1px leveä ja korkea suorakulmainen):

Vinkki:Tarjoamme yllä olevia esimerkkejä, jotta voit ymmärtää paremmin height- ja width-ominaisuuksien käytön. Jos tarvitset laajan, yksivärisen tasoalueen sivun koristeluun, parempi tapa onLuo taustaväri CSS:n avulla.
Height- ja width-ominaisuuksien yksityiskohtainen selitys
Miksi käyttää height- ja width-ominaisuuksia
Oletko koskaan nähnyt, että dokumentin sisältö liikkuu epäsäännöllisesti ladattaessa? Tämä johtuu siitä, että selain mukauttaa sivun asettelua jatkuvasti, jotta se voi näyttää jokaisen ladataan kuvan. Selain ladata ja tulkita kuvan leveyden ja korkeuden määrittääkseen kuvan kokonaisuuden, ja sitten se varaa vastaavan suoran tilan näyttöikkunassa. Tämä kertoo meille myös, että kuvat ovat erillisiä tiedostoja, jotka ladataan erikseen alkuperäistiedostosta.
Tämä ei kuitenkaan ole kaikkein tehokkain tapa näyttää dokumentti, koska selain on tarkistettava jokainen kuvatiedosto ja laskea niiden näyttötila ennen kuin se voi näyttää vierekkäisiä ja seuraavia dokumenttien sisältöjä. Tämä voi aiheuttaa suuren viiveen dokumentin näyttämisessä ja häiritä käyttäjän lukemista.
Luoja kannalta tehokkaampi tapa on määrittää kuvan koko <img> -tagin height- ja width-ominaisuuksilla. Tällä tavalla selain varaa kuvan sijainnin ennen kuvan lataamista, mikä nopeuttaa dokumentin näyttämistä ja estää dokumentin sisällön liikkumisen. Molemmat ominaisuudet vaativat kokonaislukuja ja ne esitetään pikseleinä kuvan koossa. Ominaisuuksien järjestys <img> -tagissa ei ole merkitystä.
Height- ja width-ominaisuuksien ongelmat
Vaikka <img> -tagin height- ja width-ominaisuudet voivat parantaa suorituskykyä ja antaa sinulle joitakin pieniä vinkkejä, niiden käytössä on kuitenkin joitakin ikäviä haittavaikutuksia. Vaikka käyttäjä on sulkenut automaattisen kuvien latauksen, selain näyttää edelleen kuvan varattu tila määritetyn kohteen koossa. Tämä jättää lukijalle yleensä tyhjän kehikon, jossa on merkityksetön ikoni, joka osoittaa kuvan sijainnin. Tässä tapauksessa sivu näyttää erittäin huonolta, ikään kuin sitä ei olisi valmis, ja suurin osa sisällöstä on hyödytöntä. Jos ei käytetä määriteltyjä mittoja, selain sijoittaa kuvan ikonin tekstiin, mikä antaa vähintään jonkin verran luettavaa.
Tämä kysymys ei ole vielä ratkaistu, mutta haluamme korostaa yhtä asiaa: käytä sitä. alt-ominaisuus jaKuvaileva tekstiNäin lukijat vähintään tietävät, mitä täällä puuttuu. Suosittelemme silti käyttämään näitä kokonaisuuksia, koska kannustamme kaikkea, mikä parantaa verkkotehoa.
Selaimen tuki
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Tuki | Tuki | Tuki | Tuki | Tuki |