Kako postaviti veličinu slike u html. Promjena veličine fotografije u centimetrima za ispis na papiru, uzimajući u obzir DPI online. Kako umetnuti sliku u HTML

Ne znate kako povećati sliku? Ovo je vrlo jednostavan zadatak budući da je sve što trebate već instalirano na vašem računalu. Pročitajte ovaj vodič i naučit ćete kako promijeniti veličinu fotografije pomoću 5 jednostavnih alata.

Metoda 1: Kako promijeniti veličinu slike u programu Microsoft Paint

1. Pronađite i pokrenite MS Paint. Dolazi unaprijed instaliran na svim verzijama operacijski sustav Windows. Start> Svi programi> Pribor> Bojanje:

1. Povucite sliku u prozor Paint ili upotrijebite Izbornik > Otvori (Ctrl + O).
2. U glavnom izborniku programa pronađite stavku " Promijeni veličinu" i odaberite je:

1. Otvorit će se ploča za promjenu veličine i proporcija slike. Možete odrediti vrijednost u pikselima. Ne zaboravite provjeriti " Održavajte proporcije" U suprotnom će slika biti deformirana:

1. Za povećanje veličine slike kliknite na gumb "OK" i spremite fotografiju.

savjet:

• Ako ne možete odrediti veličinu svoje fotografije, a da je ne razvučete, možete upotrijebiti alat za izrezivanje da uklonite neželjene rubove. Kako to učiniti opisano je u stavku 3;
• Da biste brže otvorili fotografiju, desnom tipkom miša kliknite na nju i odaberite iz kontekstni izbornik stavak " Otvori pomoću programa Paint»;
• Najbolje je spremiti sliku u istom formatu kao i original.

Metoda 2. Kako promijeniti veličinu slike u MS Photo Gallery

1. Ako Microsoft Photo Gallery nije instaliran na vašem računalu ( Start > Galerija fotografija), trebate ga preuzeti i instalirati kao dio Windows Essentials 2012;
2. Pokrenite MS Photo Gallery i pronađite svoju grafičku datoteku;
3. Desnom tipkom miša kliknite na njega i odaberite "Promijeni veličinu...":

1. Odaberite gotovu postavku: " Mali 640 piksela", "Srednji 1024", "Veliki 1280", itd.

1. kliknite " Promijenite veličinu i spremite" Nakon što povećate veličinu slike, slika će biti smještena u istu mapu, au njoj će ostati i original.

savjet:

• Ako trebate postaviti točnu veličinu slike, odaberite " Prilagođen" i postavite veličinu na veću stranu fotografije;
• Za promjenu veličine više fotografija odjednom, odaberite ih dok držite pritisnutu tipku Ctrl.

Metoda 3: Kako promijeniti veličinu slike u Photoscapeu

U Photoshopu možete povećati veličinu slike. Ili za ovo upotrijebite Photoscape.

1. Preuzmite Photoscape i instalirajte ga. Pokrenite program;
2. Idite na karticu "Uređivač" i pronađite fotografiju koju želite urediti:

1. Na dnu slike nalazi se gumb "Promijeni veličinu", kliknite na njega.
2. Postavite novu veličinu fotografije. Provjerite opciju " Održavajte omjer slike" je uključen i pritisnite gumb "OK":

1. Spremite uređenu sliku.

savjet:

• Ako trebate promijeniti veličinu više slika, upotrijebite " Skupni uređivač" Dodajte mapu i promijenite veličinu svih fotografija u njoj;
• Ako ne znate točnu veličinu, možete postaviti "Postotak" izvorne veličine.

Metoda 4. Kako promijeniti veličinu slike u IrfanViewu

1. Instalirajte IrfanView - odličan alat za pregledavanje i povećavanje slika;
2. Dodajte fotografiju povlačenjem u prozor programa ili klikom na prvi gumb na alatnoj traci:

1. Idite na karticu "Slika", odaberite " Promjena veličine/proporcija» ( Ctrl+R);
2. Postavite novu veličinu u pikselima, centimetrima, inčima ili kao postotak izvorne slike:

1. Spremite sliku.

savjet:

• Možete koristiti standardne veličine: 640 x 480 piksela, 800 x 600 piksela, 1024 x 768 piksela itd.;
• Spremiti visoka kvaliteta fotografije, provjerite je li DPI postavljen na najmanje 300.

Metoda 5. Kako promijeniti veličinu slike na mreži

1. Za promjenu veličine slike na mreži idite na PicResize.
2. Pritisnite gumb pretraživati" za odabir fotografije. kliknite " Nastaviti»:

1. Odaberite postotak izvorne slike, primjerice 50% manje. Alat će prikazati veličinu izlazne slike. Alternativno, možete unijeti svoju točnu veličinu odabirom " Veličina po izboru»:

Ova lekcija je vrsta nastavka prethodne, u kojoj smo pogledali, sada je vrijeme da produbite svoje znanje i pogledate CSS svojstva Slike.

Dimenzije slike u CSS-u

Idemo skužiti što ima novo ovdje, napravio sam img klasu u kojoj sam specificirao dimenzije slike, širina je širina, a visina je visina, specificirao sam dimenzije veće od originalnih da se jasno vidi kako slika će se promijeniti.

Radi jasnoće, dat ću primjer gdje će biti puno teksta, a vidjet ćete koje su uvlake sa slike u ovom primjeru Koristit ćemo svojstvo margine koje će vam dati priliku da procijenite njegove mogućnosti.

Radi jasnoće dat ću primjer gdje će biti puno teksta, a vidjet ćete koje uvlake sa slike ima.U ovom primjeru koristit ćemo sliku bez navođenja uvlaka kako biste jasno vidjeli razliku.

U pregledniku vidimo sljedeće:

Napravio sam uvlake od slike u ovom primjeru zahvaljujući parametru margine, koji nam je dao 20 piksela uvlake sa sva četiri ruba. Ovdje možete učiniti složeniju manipulaciju; možete postaviti pomak od određenog ruba, na primjer:

• margin-top – margina s gornje strane
• margin-right – margina s desne strane
• margin-bottom – margina s donje strane
• margin-left – margina s lijeve strane

Sukladno tome, ovdje možete sve finije namjestiti ili postaviti uvlaku samo s jedne ili dvije strane bez diranja ostalih.

U pregledniku:

Postavljamo okvir oko slike, zahvaljujući parametru border, prvo postavljamo širinu okvira koristeći border-width, postavljamo ga u pikselima, zatim stil okvira, odnosno njegov izgled border-style, ovdje postoji nekoliko vrijednosti koje možete odabrati:

I posljednji parametar koji ćemo prilagoditi je boja obruba, koja je postavljena parametrom boje obruba.

U pregledniku vidimo:

Kao što razumijete, dodijelili smo pozadinu oznaci tijela zahvaljujući biraču oznaka, budući da zauzima cijeli dokument, možemo je dodijeliti i drugim oznakama. Parametar background nam je dao pozadinu sa slikom adrese na koju pišemo u zagradama. Također možete manipulirati pozadinom, na primjer:

pozadina: url(proba.png) ponovi-x;

Pozadina će se ponavljati samo duž X osi, odnosno vodoravno u jednoj liniji.

pozadina: url(proba.png) repeat-y;

Pozadina će se ponavljati samo duž Y osi, odnosno okomito u jednoj liniji.

pozadina: url(proba.png) bez ponavljanja;

Pozadina se neće ponavljati i pojavit će se samo jedna slika.

veličina pozadine: 500px 200px;

Ovaj dodatni parametar, koji određuje veličinu slike za pozadinu, širinu i visinu.

Izrada slike prozirnom pomoću CSS-a

U pregledniku vidimo sljedeće:

Ovo svojstvo došlo je s pojavom CSS3 i zapravo je dobilo prilično široku upotrebu. Implementirano pomoću parametra neprozirnosti, koji postavlja prozirnost slike, vrijednosti od 0 do 1, i drugog filtra parametra: alpha(Opacity=50); radi istu stvar samo za Internet preglednik Explorier budući da starije verzije ne podržavaju parametar neprozirnosti, vrijednosti od 0 do 100. U primjeru sam posebno napravio dvije slike kako bi se jasno vidjela razlika.

Ovo zaključuje lekciju "CSS Image Properties". Nadam se da vam je ova lekcija bila korisna i inspirirala vas da dalje proučavate jezik i steknete nova znanja.

Datum objave: 2014-04-22

Veličina fotografije bit će promijenjena na navedenu veličinu u centimetrima (milimetrima, inčima), kao i na navedenu veličinu DPI, prema standardima ispisa na papiru. Dimenzije u cm, mm i inčima mogu se odrediti s točnošću tisućinki, npr. umjesto formata 15x10 možete postaviti 15,201x10,203 cm.

Tablica sa standardnim veličinama fotografija u okomitom (portretnom) položaju:

Standardna veličina papira Veličina A4- 21x29,7 cm ili 2480x3508 piksela pri 300 dpi. Dimenzije drugih formata listova mogu se vidjeti na stranici Wikipedije, ali zapamtite da su dimenzije tamo navedene u milimetrima i inčima, tj. U postavkama na ovoj stranici trebate odabrati odgovarajuću vrijednost.

Ako trebate promijeniti veličinu fotografije bez uzimanja u obzir DPI (točaka po inču), to jest, poštujući samo proporcije navedenog formata, tada za to morate postaviti parametar "Veličina u DPI" na "0" u postavke.

Izvorna slika se ne mijenja ni na koji način. Dobit ćete drugu obrađenu sliku.

Za promjenu veličine slike pomoću HTML oznake Navedeni su atributi width (širina) i height (visina). Kao vrijednost koriste se pikseli, a argumenti moraju odgovarati fizičkim dimenzijama slike. Na primjer, na sl. Slika 10.6 prikazuje sliku dimenzija 100x111 piksela.

Riža. 10.6. Slika u originalnoj veličini

Sukladno tome, HTML kod za postavljanje ove slike dan je u primjeru 10.4.

Primjer 10.4. Crtanje dimenzija

Ako su dimenzije slike izričito navedene, preglednik ih koristi za prikaz praznog područja koje odgovara slici tijekom procesa učitavanja dokumenta (Sl. 10.7). U suprotnom, preglednik čeka da se slika potpuno učita, nakon čega mijenja širinu i visinu slike (Sl. 10.8). U tom slučaju, tekst se može preoblikovati jer izvorna veličina slike nije poznata i automatski se postavlja na malu.

Riža. 10.7. Dimenzije slike nisu navedene i još se nije učitala

Riža. 10.8. Slika je učitana, tekst je preoblikovan

Širina i visina slike mogu se promijeniti u manju ili veću. Međutim, to ni na koji način ne utječe na brzinu učitavanja slike, jer veličina datoteke ostaje nepromijenjena. Stoga oprezno umanjujte jer... To može izazvati zabunu među čitateljima zašto se tako mala slika toliko dugo učitava. Ali povećanje veličine dovodi do suprotnog učinka - veličina slike je velika, ali se datoteka učitava brže u odnosu na sliku iste veličine.

Na sl. 10.9 prikazuje istu sliku kao što je prikazano na sl. 10,6, ali s dvostruko većom širinom i visinom.

Riža. 10.9. Prikaz uvećane slike u pregledniku

Kod za takav crtež ostat će gotovo nepromijenjen i prikazan je u primjeru 10.5.

Primjer 10.5. Promjena veličine slike

Ova promjena veličine naziva se resampling, a algoritam preglednika je inferioran u svojim mogućnostima grafički urednici. Stoga je potrebno povećavati slike na ovaj način samo u posebnim slučajevima, inače se kvaliteta slike previše pogoršava. Bolje je koristiti neku vrstu grafičkog programa. Izuzetak su crteži koji sadrže pravokutne površine. Na sl. 10.10 prikazuje datoteku uzorka koja zauzima 54 bajta i ima izvorna veličina 8 x 8 piksela, skalirano do 150 piksela.

Riža. 10.10. Uvećana slika

Preglednici koriste dva algoritma za ponovno uzorkovanje - bikubični (pruža glatke rubove i glatki tonski raspon boja) i najbliže točke (čuva izvorni skup boja i oštre rubove). Najnovije verzije preglednici koriste bikubni algoritam, a stariji preglednici, naprotiv, koriste algoritam temeljen na najbližim točkama.