Kako Zmanjšati Sliko V Html

Kazalo:

Kako Zmanjšati Sliko V Html
Kako Zmanjšati Sliko V Html

Video: Kako Zmanjšati Sliko V Html

Video: Kako Zmanjšati Sliko V Html
Video: kako zmanjšati sliko na macu 2024, November
Anonim

V jeziku za označevanje hiperteksta (HTML) se za prikaz slike na strani uporablja poseben ukaz "tag". Ta oznaka se imenuje img in vsebuje nabor spremenljivk - "atributi". S pomočjo atributov lahko določite vse vidike prikaza slike na hipertekstovni strani, vključno z njenimi dimenzijami. Vendar to ni edini način za rešitev težave - velikost slike lahko zmanjšate tudi s pomočjo Cascading Style Sheets (CSS).

Kako zmanjšati sliko v html
Kako zmanjšati sliko v html

Navodila

Korak 1

Atributa višine in širine postavite v oznako, odgovorno za prikaz želene slike. Prvo nastavite na navpično velikost slike, drugo pa vodoravno. Nastavite obe številki v slikovnih pikah, vendar tukaj ni treba navajati enot - px. Pri izračunu potrebnih vrednosti za te atribute bodite pozorni na upoštevanje razmerja zmanjšanja slike, sicer bo prikazana v popačeni obliki. Če na primer na stran postavite prepolovljeno sliko iz datoteke, imenovane SomePic.jpg, katere začetne dimenzije so 500 krat 300 slikovnih pik, lahko oznako naredite z naslednjim ukazom:

2. korak

Nastavite lahko sorazmerno zmanjšanje izvirnih dimenzij slike v odstotkih. Če želite to narediti, uporabite samo atribut višine, ne da bi določili širino, in dodajte znak za odstotek po določitvi številke, ki določa velikost. Na primer, z oznako, napisano v tej obliki, lahko dosežete enak učinek kot v primeru iz prejšnjega koraka:

3. korak

Če želite z opisom slogov določiti velikost slike, uporabite isto ime oznake - img - in atribute - širino in višino. V tem primeru je treba vedno določiti merske enote - px, pt ali%. Če želite nastaviti razpolovitev velikosti popolnoma vseh slik na strani, v blok za opis sloga postavite naslednji vnos: img {višina: 50%;} Če želite zmanjšati velikost samo ene slike, dodajte dodaten atribut id svoji oznaki in ji dodelite eno unikatno za slike te vrednosti strani - na primer PicOne: dodajte isto vrednost zapisu sloga in jo ločite s "hash" # od imena oznake. Celoten opis sloga v tem primeru je lahko videti takole: img # OnePic {višina: 50%;}

Priporočena: