V HTML-ju lahko spreminjamo velikost katere koli slike na naslednje različne načine:
- Uporaba oznake HTML
- Uporaba atributa sloga Inline
- Uporaba internega CSS
Uporaba oznake HTML
Opomba: HTML 5 ne podpira atributa višine in širine ![]()
, zato moramo uporabiti atribut vgrajenega sloga in notranje možnosti CSS za spreminjanje slike ali velikosti slike.
Če želimo spremeniti velikost slike v dokumentu z uporabo Html oznaka ki naj bo prikazan na spletni strani, moramo slediti korakom, ki so navedeni spodaj. S temi koraki lahko preprosto spremenimo velikost slike:
Korak 1: Najprej moramo v kateri koli urejevalnik besedil vtipkati kodo Html ali v urejevalniku besedil odpreti obstoječo datoteko Html, v kateri želimo spremeniti velikost slike.
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>
2. korak: Zdaj postavite kazalec znotraj oznake img. In potem moramo uporabiti atribut višine in širine oznake img za spreminjanje velikosti slike. Torej moramo vnesti te atribute:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
3. korak: In končno moramo shraniti datoteko Html in jo nato zagnati.
izjava o primeru verilog
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>Preizkusite zdaj
Rezultat zgornje kode Html je prikazan na naslednjem posnetku zaslona:
Uporaba atributa Inline Style
Če želimo spremeniti velikost slike z atributom sloga v vrstici, ki naj bo prikazana na spletni strani, moramo slediti korakom, ki so navedeni spodaj. S temi koraki lahko preprosto spremenimo velikost slike.
Korak 1: Najprej moramo v kateri koli urejevalnik besedil vtipkati kodo Html ali v urejevalniku besedil odpreti obstoječo datoteko Html, v kateri želimo uporabiti atribut style za spreminjanje velikosti slike.
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>
2. korak: Zdaj postavite kazalec znotraj oznaka img tiste slike, katere velikost želimo spremeniti. In potem moramo atribut style vnesti takoj za atributom src. Nato moramo vnesti lastnost širine in višine v atribut sloga, kot je prikazano v naslednjem bloku:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
3. korak: In končno moramo shraniti datoteko Html in jo nato zagnati.
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>Preizkusite zdaj
Rezultat zgornje kode Html je prikazan na naslednjem posnetku zaslona:
Uporaba internega CSS
Če želimo spremeniti velikost slike ali slike z uporabo notranje kaskadne tabele slogov, ki naj bo prikazana na spletni strani, moramo slediti korakom, ki so navedeni spodaj. S temi koraki lahko preprosto spremenimo velikost katere koli slike.
Korak 1: Najprej moramo v kateri koli urejevalnik besedil vtipkati kodo Html ali v urejevalniku besedil odpreti obstoječo datoteko Html, v kateri želimo uporabiti notranji CSS za spreminjanje velikosti slike.
java datum zdaj
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>
2. korak: Zdaj moramo postaviti kazalec v oznako head dokumenta Html in nato definirati sloge znotraj oznako, kot je prikazano v naslednjem bloku. In nato vnesite širina in višina atribut v izbirnik ID-ja.
#imagesize { width:100px; height:100px; } 3. korak: Zdaj moramo vnesti ID v oznako img te slike, katere velikost želimo spremeniti:
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> Preizkusite zdaj 5. korak: Zdaj moramo shraniti datoteko Html in jo nato zagnati. Naslednji posnetek zaslona prikazuje rezultat zgornje kode Html:
