HTML nam omogućuje da koristimo slike na web stranicama i da ih učinimo privlačnijim primjenom različitih stilova. Ako trebate promijeniti omjer slike ili vaša slika ne odgovara izgledu vaše web stranice, možete joj promijeniti veličinu. U tu svrhu možete koristiti ' širina ' i ' visina ' svojstva na ' img ” oznaka. Ove vrijednosti svojstava mogu se jednostavno postaviti u CSS pikselima.
U ovom ćete priručniku naučiti kako promijeniti veličinu slike u HTML-u.
Prije početka potrebno je dodati sliku u HTML datoteku na kojoj će se izvršiti operacija promjene veličine slike.
Kako ugraditi sliku u HTML?
Za dodavanje slike u HTML upotrijebite sljedeću sintaksu:
< img src = 'images/butterfly.jpg' sve = 'zamjenski tekst' >
Opis gore navedene sintakse je opisan u nastavku. ' img ” oznaka koristi dva atributa:
-
- “src” koristi se za pružanje staze (URL) slike.
- 'sve' koristi se za pružanje alternativnog teksta ako slika nije prikazana.
HTML
Donji kod predstavlja dva diva. U prvom divu dodali smo naslov u gornjem središtu naše web stranice kao ' Veličina slike u HTML-u ” pomoću oznake
:
< div >
< centar >
< h1 > Veličina slike u HTML h1 >
centar >
div >
Drugi div je dodan s klasom pod nazivom ' spremnik ” i za predstavljanje slike u sredini koristili smo oznaku
. Unutar središta napišite dolje navedeni kod za dodavanje slike:
< div razreda = 'kontejner' >
< centar >
< img src = 'images/butterfly.jpg' sve = 'zamjenski tekst' >
centar >
div >
Odabrana slika s ' 640*437 ” omjer širine i visine izgledat će ovako:
Sljedeći odjeljak demonstrirat će metodu promjene veličine slike.
Kako promijeniti veličinu slike u HTML-u?
Možete prilagoditi veličinu slike ili joj promijeniti veličinu pomoću ' širina ' i ' visina ” za postavljanje njegove širine i visine.
Sada postavimo vrijednost širine dodane slike kao ' 300 ” i pogledajte kako radi:
< img src = 'images/butterfly.jpg' sve = 'zamjenski tekst' širina = '300' >
Vidi se da je širina slike promijenjena i da joj je veličina uspješno promijenjena:
Osim širine, ' visina ” atribut se također može koristiti za istu svrhu. Da vidite razliku u veličini, postavite ' 550 ” piksela kao visina slike:
< img src = 'images/butterfly.jpg' sve = 'zamjenski tekst' širina = '300' visina = '550' >
Možete jasno uočiti razliku u veličini slike:
Tako se atributi širine i visine koriste za promjenu veličine slike.
Zaključak
U HTML-u, ' visina ' i ' širina ” atributi se koriste za promjenu veličine slike. Možete promijeniti zadani omjer širine i visine dodane slike postavljanjem vrijednosti ovih atributa. Kao rezultat toga, može se vidjeti jasna razlika u pogledu veličine slike. Ovaj je blog pokazao metodu korištenja svojstava visine i težine za promjenu veličine slika u HTML-u.
Drugi div je dodan s klasom pod nazivom ' spremnik ” i za predstavljanje slike u sredini koristili smo oznaku
< centar >
< img src = 'images/butterfly.jpg' sve = 'zamjenski tekst' >
centar >
div >
Odabrana slika s ' 640*437 ” omjer širine i visine izgledat će ovako:
Sljedeći odjeljak demonstrirat će metodu promjene veličine slike.
Kako promijeniti veličinu slike u HTML-u?
Možete prilagoditi veličinu slike ili joj promijeniti veličinu pomoću ' širina ' i ' visina ” za postavljanje njegove širine i visine.
Sada postavimo vrijednost širine dodane slike kao ' 300 ” i pogledajte kako radi:
< img src = 'images/butterfly.jpg' sve = 'zamjenski tekst' širina = '300' >
Vidi se da je širina slike promijenjena i da joj je veličina uspješno promijenjena:
Osim širine, ' visina ” atribut se također može koristiti za istu svrhu. Da vidite razliku u veličini, postavite ' 550 ” piksela kao visina slike:
Možete jasno uočiti razliku u veličini slike:
Tako se atributi širine i visine koriste za promjenu veličine slike.
Zaključak
U HTML-u, ' visina ' i ' širina ” atributi se koriste za promjenu veličine slike. Možete promijeniti zadani omjer širine i visine dodane slike postavljanjem vrijednosti ovih atributa. Kao rezultat toga, može se vidjeti jasna razlika u pogledu veličine slike. Ovaj je blog pokazao metodu korištenja svojstava visine i težine za promjenu veličine slika u HTML-u.