HTML:ssä voimme muuttaa minkä tahansa kuvan kokoa seuraavilla eri tavoilla:
- HTML-tunnisteen käyttö
- Inline-tyyliattribuutin käyttäminen
- Sisäisen CSS:n käyttö
HTML-tunnisteen käyttö
Huomautus: HTML 5 ei tue korkeus- ja leveysmääritettä ![]()
, joten meidän on käytettävä inline style -attribuuttia ja sisäisiä CSS-vaihtoehtoja kuvan tai kuvan koon muuttamiseen.
Jos haluamme muuttaa asiakirjassa olevan kuvan kokoa käyttämällä HTML-tunniste joka näytetään verkkosivulla, meidän on noudatettava alla annettuja vaiheita. Näiden vaiheiden avulla voimme helposti muuttaa kuvan kokoa:
Vaihe 1: Ensinnäkin meidän on kirjoitettava HTML-koodi mihin tahansa tekstieditoriin tai avattava olemassa oleva HTML-tiedosto tekstieditorissa, jossa haluamme muuttaa kuvan kokoa.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Vaihe 2: Aseta nyt kohdistin img-tunnisteen sisään. Ja sitten meidän on käytettävä img-tunnisteen korkeus- ja leveysattribuuttia kuvan koon muuttamiseen. Joten meidän on kirjoitettava nämä attribuutit:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Vaihe 3: Ja viimeinkin meidän on tallennettava HTML-tiedosto ja suoritettava se.
tietokonetyötä
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Testaa nyt
Yllä olevan HTML-koodin tulos näkyy seuraavassa kuvakaappauksessa:
Inline Style -attribuutin käyttäminen
Jos haluamme muuttaa kuvan kokoa käyttämällä web-sivulla näytettävää inline style -attribuuttia, meidän on noudatettava alla olevia ohjeita. Näiden vaiheiden avulla voimme helposti muuttaa kuvan kokoa.
Vaihe 1: Ensinnäkin meidän on kirjoitettava HTML-koodi mihin tahansa tekstieditoriin tai avattava olemassa oleva HTML-tiedosto tekstieditorissa, jossa haluamme käyttää style-attribuuttia kuvan koon muuttamiseen.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Vaihe 2: Aseta nyt kohdistin sisään img-tunniste kuvasta, jonka kokoa haluamme muuttaa. Ja sitten meidän on kirjoitettava style-attribuutti heti src-attribuutin jälkeen. Ja sitten meidän on kirjoitettava leveys- ja korkeusominaisuus style-attribuutissa samalla tavalla kuin seuraavassa lohkossa:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Vaihe 3: Ja lopuksi meidän on tallennettava HTML-tiedosto ja suoritettava se.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Testaa nyt
Yllä olevan HTML-koodin tulos näkyy seuraavassa kuvakaappauksessa:
Sisäisen CSS:n käyttö
Jos haluamme muuttaa kuvan tai kuvan kokoa käyttämällä sisäistä CSS-tyylitaulukkoa, joka näytetään verkkosivulla, meidän on noudatettava alla olevia ohjeita. Näiden vaiheiden avulla voimme helposti muuttaa minkä tahansa kuvan kokoa.
Vaihe 1: Ensinnäkin meidän on kirjoitettava HTML-koodi mihin tahansa tekstieditoriin tai avattava olemassa oleva HTML-tiedosto tekstieditorissa, jossa haluamme käyttää sisäistä CSS:ää kuvan koon muuttamiseen.
java math.min
Change the Size of an image using internal CSS Hello User! <br> This is <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Vaihe 2: Nyt meidän on asetettava kohdistin HTML-dokumentin head-tunnisteeseen ja määritettävä sitten tyylit tagi seuraavan lohkon osoittamalla tavalla. Ja sitten kirjoita leveys ja korkeus määrite id-valitsimeen.
#imagesize { width:100px; height:100px; } Vaihe 3: Nyt meidän on kirjoitettava id sen kuvan img-tunnisteeseen, jonka kokoa haluamme muuttaa:
Change the Size of an image using internal CSS #imagesize { width:200px; height:200px; } Hello User! <br> This is <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp" id="imagesize"> <br> Testaa nyt Vaihe 5: Nyt meidän on tallennettava HTML-tiedosto ja suoritettava tiedosto. Seuraavassa kuvakaappauksessa näkyy yllä olevan HTML-koodin tulos:
