HTML <img> height-ominaisuus

HTML <img> - merkki

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">

Kokeile itse

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):


Kokeile itse

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

HTML <img> - merkki