Sisältö

• Askeleet
• Vinkkejä

Tässä artikkelissa kerrotaan kuinka voit asettaa kuvan korkeuden ja leveyden HTML -muodossa.

• "Width" -määritteellä määritetään kuvan leveys (pikseleinä).
• Attribuutti "height" määrittää kuvan korkeuden (pikseleinä).
• HTML4.01: ssa korkeus voidaan asettaa pikseleinä tai prosentteina, mutta HTML5: ssä vain pikseleinä.

Askeleet

1. 1 Avaa HTML -tiedosto. Avaa esimerkiksi tiedosto default.html.
2. 2 Lisää seuraava rivi HTML -koodiin.
   • img src = "imagefile.webp" alt = "Image" height = "42" width = "42">
   • src sisältää polun graafiseen tiedostoon (kuva).
   • Alt -tilassa kuvan koko on asetettu.
3. 3 Korvaa korkeus- ja leveysmääritteiden arvot haluamillasi arvoilla. Esimerkiksi: korkeus = "19" leveys = "20"
4. 4 Tallenna tiedosto ja avaa se missä tahansa selaimessa. Tarkista tämä, miten kuvan kokoa muutetaan. Leveys -määritettä tukevat kaikki suuret selaimet (Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer).

Vinkkejä

• Aseta aina kuvan korkeus ja leveys. Joten kun sivu ladataan, kuvaan on varattu tilaa. Muussa tapauksessa selain ei tiedä kuvan kokoa eikä varaa tilaa, jolloin sivun asettelu muuttuu sivun latautuessa.
• Jos suuren kuvan kokoa pienennetään käyttämällä korkeus- ja leveys -määritteitä, käyttäjä lataa suuren kuvan (vaikka se näyttäisikin pienenä sivulla). Siksi suosittelemme, että muutat kuvan kokoa ensin grafiikkaeditorissa.