Kuinka Pienentää Kuvaa HTML-muodossa

Sisällysluettelo:

Kuinka Pienentää Kuvaa HTML-muodossa
Kuinka Pienentää Kuvaa HTML-muodossa

Video: Kuinka Pienentää Kuvaa HTML-muodossa

Video: Kuinka Pienentää Kuvaa HTML-muodossa
Video: html tekstin muotoilut ja kuvan lisäys 2024, Huhtikuu
Anonim

Hypertekstimerkintäkielellä (HTML) erityistä komentoa "tag" käytetään kuvan näyttämiseen sivulla. Tätä tagia kutsutaan nimellä img ja se sisältää joukon muuttujia - "attribuutteja". Määritteiden avulla voit määrittää kaikki hypertekstisivun kuvan näyttämisen näkökohdat, myös sen mitat. Tämä ei kuitenkaan ole ainoa tapa ratkaista ongelma - voit myös pienentää kuvan kokoa CSS (CSS) -työkalujen avulla.

Kuinka pienentää kuvaa HTML-muodossa
Kuinka pienentää kuvaa HTML-muodossa

Ohjeet

Vaihe 1

Lisää korkeuden ja leveyden määritteet tagiin, joka vastaa halutun kuvan näyttämistä. Aseta ensimmäinen kuvan pystysuoraan kokoon ja toinen vaakasuoraan. Aseta molemmat numerot pikseleinä, mutta yksiköitä - px - ei tarvitse ilmoittaa tässä. Kun lasket tarvittavia arvoja näille ominaisuuksille, kiinnitä huomiota kuvan pienennysosuuksien noudattamiseen, muuten se näytetään vääristyneessä muodossa. Esimerkiksi, jos haluat laittaa sivulle puolittuneen kuvan tiedostosta SomePic.jpg, jonka aloitusmitat ovat 500 x 300 pikseliä, tagi voidaan tehdä seuraavalla komennolla:

Vaihe 2

Voit asettaa alkuperäisen kuvan mittojen suhteellisen pienennyksen prosentteina. Voit tehdä tämän käyttämällä vain korkeusattribuuttia määrittelemättä leveyttä ja lisäämällä prosenttimerkki sen jälkeen, kun olet määrittänyt koon määrittelevän numeron. Voit esimerkiksi saavuttaa saman vaikutuksen kuin edellisen vaiheen esimerkissä tällä lomakkeella kirjoitetulla tagilla:

Vaihe 3

Jos haluat määrittää kuvan koon tyylien kuvauksen avulla, käytä samaa tunnisteen nimeä - img - ja määritteitä - leveys ja korkeus. Tässä tapauksessa mittayksiköt - px, pt tai% - on aina määritettävä. Määritä sivun kaikkien kuvien koon puolittaminen asettamalla seuraava merkintä tyylin kuvauslohkoon: img {height: 50%;} Jos haluat pienentää vain yhden kuvan kokoa, lisää ylimääräinen id-attribuutti sen tagiin ja määritä sille yksi ainutlaatuinen tämän sivun arvon kuville - esimerkiksi PicOne: Lisää sama arvo tyylitietueeseen erottamalla se "hash" #: lla tagin nimestä. Täydellinen tyylikuvaus voi tässä tapauksessa näyttää tältä: img # OnePic {height: 50%;}

Suositeltava: