Kako spremeniti velikost slike s HTML



HTML

Spodnji koraki vodijo uporabnike, ki želijo sliko ohraniti v prvotni velikosti datoteke (v KB ali MB ) in spremenite velikost prikaza slike s HTML. Čeprav je to mogoče, kljub temu predlagamo, da s pomočjo urejevalnika slik spremenite velikost slike, da zmanjšate velikost datoteke in zmanjšate Prenesi čas slike.



Ko velikost slike spremenite s spodnjimi koraki, mora še vedno naložiti večjo sliko, čeprav je v brskalniku videti manjša.

kako najti zgodovino na googlu

Spremenite velikost z HTML

V IMG SRC določite širino in višino HTML oznaka, kot je prikazano v spodnjem primeru.

 Computer Hope

Kako je slika videti normalno

Računalniško upanje

Z zgornjo kodo spremenite velikost slike

Računalniško upanje

Opomba

Pri spreminjanju velikosti slike morate ohraniti razmerje stranic. V nasprotnem primeru se slika lahko popači in izgubi nekaj kakovosti slike.

Spremenite velikost s CSS

Velikost slike lahko tudi spremenite CSS , kot je prikazano v spodnjih primerih.

img.resize { width:200px; height:40px; }
img.resize { max-width:50%; max-height:50%; }

V prvem primeru je dejanska velikost v slikovnih pikah določena za širino in višino. S to možnostjo omejite slike, ki uporabljajo CSS. Ker določa širino in višino, lahko ta metoda povzroči popačene slike, če nima razmerja stranic 5: 1.

Drugi primer določa odstotek prvotne velikosti slike, tako širine kot višine, namesto velikosti v slikovnih pikah. Uporaba te možnosti omogoča uporabo z večjim obsegom slik. Ker je določen odstotek širine in višine slike, lahko brskalnik spremeni skoraj vsako sliko in ohrani njeno razmerje stranic.

Če želite uporabiti CSS za oznako HTML IMG SRC, naredite naslednje.

 Computer Hope logo small

Uporaba CSS povzroči krajše oznake IMG SRC, saj morate v oznaki določiti samo ime razreda, da aktivirate kodo CSS za to sliko.