HTML <img> width ominaisuus
Määrittely ja käyttö
width ominaisuus määrittää kuvan leveyden pikseleinä.
Vinkki:Määritä kuvan height ja width ominaisuus on hyvä tapa. Jos nämä ominaisuudet on asetettu, voidaan varata tilaa kuvalle sivun latautuessa. Jos näitä ominaisuuksia ei ole, selain ei tiedä kuvan kokoa eikä voi varata sopivaa tilaa kuvalle, joten sivun asettelu muuttuu, kun kuva ladataan. (Tämä näkökulma selitetään yksityiskohtaisesti edelleen).
Vinkki:Älä käytä height ja width ominaisuudella laajentaa kuvaa. Jos käytät height- ja width Jos haluat pienentää kuvaa ominaisuudella, käyttäjän on ladata suuria tietomääriä kuvia (vaikka kuva näyttää pieneltä sivulla). Oikea tapa on käsitellä kuvaa sopivaksi kohteeksi ennen kuin sitä käytetään verkkosivulla.
Lue lisää:height- ja width-ominaisuuksien selitys
Esimerkki
Kuva, joka on 600 pikselin korkea ja 500 pikselin leveä:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Syntaksi
<img width="pixels">
Ominaisuusarvo
| Arvo | Kuvaus |
|---|---|
| pixels | Määritä kuvan leveys pikseleinä (esim. width="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 esikatseluita ja suurentaa pieniä kuvia. On kuitenkin huomattava, että selain ladataan koko tiedoston, riippumatta siitä, kuinka suuri näytettävä kokoonpano on, ja jos alkuperäinen 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 ja parantaa asiakirjan suorituskykyä. Kuvittele, että haluat sijoittaa värikkään palkin asiakirjaan. Et tarvitse luoda täysikokoista kuvaa, vaan voit luoda kuvan, jonka leveys ja korkeus ovat molemmat yhden pikselin, ja asettaa 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:n vaikutus, tämä väripalkki on valmistettu vain yhden pikselin kuvasta:
Käytä prosenttiosuuksia
Width-ominaisuuden viimeinen vinkki on käyttää prosenttiosuuksia pikseleiden absoluuttisten arvojen sijaan. Tämä saa selaimen skaalautumaan kuvan suuruuden selaimen näyttöikkunan suhteen. Siksi, jos haluat luoda yhtä leveän kuin näyttöikkunan ja 30 pikselin korkeuden värikkään palkin, 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 muotoinen width-arvo ja heightia ei huomioida, 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 kuvake (tämä johtuu siitä, että alkuperäinen ct_1px.gif on 1px leveä ja korkea suorakulmainen):
Vinkki:Tarjoamme yllä olevia esimerkkejä, jotta voit ymmärtää paremmin height- ja width-ominaisuuksien käytön. Jos tarvitset vain laajan yksivärisen lohkon sivun koristeluun, parempi tapa onLuo taustaväri CSS:n avulla.
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 analysoi kuvan leveyden ja korkeuden määrittääkseen kuvan koosta, 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äytön tila ennen kuin se näyttää vierekkäisiä ja seuraavia dokumentin sisältöjä. Tämä voi aiheuttaa suurta viivettä dokumentin näyttämisessä ja häiritä käyttäjän lukemista.
Luoja voi käyttää tehokkaampaa menetelmää määrittääkseen kuvan mitat <img> -elementin 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 ilmaistaan pikseleinä kuvan mittoina. Ominaisuuksien järjestys <img> -elementissä ei ole merkitystä.
height- ja width-ominaisuuksien ongelmat
Vaikka <img> -elementin 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 jo sammuttanut kuvien automaattisen 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, ja se vaikuttaa siltä, että se ei ole valmis, ja suurin osa sisällöstä on hyödytöntä. Jos et käytä määriteltyjä mittoja, selain asettaa kuvakkeen tekstiin, mikä antaa vähintään jonkin verran luettavaa.
Tälle kysymykelle meillä ei ole vielä ratkaisua, mutta haluamme korostaa yhtä asiaa: käytä alt-ominaisuus jaKuvaileva tekstiNäin lukijat vähintään tietävät, mitä täällä puuttuu. Suosittelemme silti käyttämään näitä mittoja, koska kannustamme kaikkea, mikä parantaa verkkotehokkuutta.
Selaimen tuki
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Tuki | Tuki | Tuki | Tuki | Tuki |
