Alla olevat vaiheet opastavat käyttäjiä, jotka haluavat säilyttää kuvan alkuperäisessä tiedostokoossa (kt tai megatavuina) ja muuttaa kuvan näyttökokoa HTML:llä. Vaikka tämä on mahdollista, suosittelemme kuitenkin, että muutat kuvan kokoa kuvaeditorilla tiedoston koon pienentämiseksi ja kuvan latausajan lyhentämiseksi.
Kun kuvan kokoa muutetaan alla olevien ohjeiden mukaisesti, sen on silti ladattava suurempi kuva, vaikka se näyttää pienemmältä selaimessa.
Muuta kokoa HTML:llä
Määritä IMG SRC HTML -tunnisteen leveys ja korkeus alla olevan esimerkin mukaisesti.
<img src="https://www.computerhope.com/cdn/computer-hope.jpg" width="200" height="40" alt="Computer Hope">
Miten kuva näyttää normaalisti
Käytä yllä olevaa koodia kuvan koon muuttamiseen
Kun muutat kuvan kokoa, sinun on säilytettävä kuvasuhde. Muuten kuva voi vääristyä ja menettää kuvan laatua.
Muuta kokoa CSS:llä
Voit myös muuttaa kuvan kokoa CSS:n avulla alla olevien esimerkkien mukaisesti.
img.resize {
width:200px;
height:40px;
}
img.resize {
max-width:50%;
max-height:50%;
}
Ensimmäisessä esimerkissä todellinen koko pikseleinä on määritetty leveydeksi ja korkeudeksi. Tämän vaihtoehdon käyttäminen rajoittaa sitä CSS:ää käyttäviä kuvia. Koska se määrittää leveyden ja korkeuden, tämä menetelmä voi aiheuttaa vääristyneitä kuvia, jos sillä ei ole 5:1-kuvasuhdetta.
Toinen esimerkki määrittää prosenttiosuuden alkuperäisen kuvan koosta, sekä leveydestä että korkeudesta, pikseleinä ilmaistun koon sijaan. Tämän vaihtoehdon käyttäminen mahdollistaa käytön suuremman kuvavalikoiman kanssa. Koska kuvan leveydestä ja korkeudesta on määritetty prosenttiosuus, selain voi muuttaa lähes minkä tahansa kuvan kokoa ja säilyttää sen kuvasuhteen.
Voit käyttää CSS:ää IMG SRC HTML -tunnisteessa seuraavasti.
<img class="resize" src="https://www.computerhope.com/cdn/computer-hope.jpg" alt="Computer Hope logo small">
CSS:n käyttö johtaa lyhyempiin IMG SRC -tageihin, koska sinun tarvitsee vain määrittää luokan nimi tagissa aktivoidaksesi kuvan CSS-koodin.
