Kako promijeniti veličinu slike u css u html. Slike i njihova svojstva u CSS-u Kako promijeniti veličinu slike u html-u

Slike su sastavni dio gotovo svake web stranice, tako da je promjena veličine neophodna. Veličinu slike možete promijeniti na 2 načina: u grafičkom uređivaču ili programski u html kod na css.

Ako ne postavite veličinu slike u CSS kodu na html-u, tada će njena visina i širina na stranici biti iste u pikselima kao izvorni fajl. Odnosno, možete promijeniti veličinu slike bez css-a i html-a, koristeći samo grafički uređivač, a ona će se automatski promijeniti na web stranici ako ne navedete njenu veličinu. Ali postoje slučajevi kada je potrebno programski promijeniti veličinu slike u css u html.

1. Promjena slike u grafičkom uređivaču

Možete promijeniti veličinu slike u bilo kojem grafičkom uređivaču (photoshop, gimp, xnview) i ona će se automatski promijeniti na stranici u skladu sa originalnim dimenzijama.

Prednosti metode:

Slika se brže učitava jer nema potrebe za preuzimanjem dodatnih podataka (piksela), koji će se zatim programski komprimirati.

Grafički uređivači ne komprimiraju slike manje od 200 piksela po širini i visini.

Kad god je to moguće i svrsishodno, pokušajte promijeniti veličinu u grafičkom uređivaču tako da se slike učitavaju brže nego kada im se programski mijenja veličina. Razlika u brzini može biti desetine puta.

2. Promjena slike u css kodu na stranici

Prednosti:

Brže je i praktičnije podesiti veličinu. Ova metoda Smanjenje slike se obično koristi radi praktičnosti. Na primjer, kada jedna slika može imati mnogo različitih veličina, često je zgodnije promijeniti vrijednosti iste programski nego učitati sve opcije formata za jednu sliku, uređenu u grafičkom uređivaču.

Male slike, manje od 200 piksela u visinu ili širinu, efikasno se kompresuju, za razliku od grafičkih uređivača. Ako želite da veličina slike na sajtu bude manja od 200 piksela, onda je bolje da originalna veličina bude 30-50% veća (260-300 piksela) kako bi se održao dobar kvalitet kada se smanji.

Pritom se neće osjetiti razlika u brzini učitavanja stranice jer male slike zauzimaju jako malo prostora i ako im povećate veličinu za 30%, nećete primijetiti nikakve promjene. Ali primijetit ćete razliku u kvaliteti.

Učitavanje slika komprimiranih softverom traje duže jer se promjena veličine događa tek nakon preuzimanja originalne verzije.

Stoga, ako je veličina slike veća od 200 piksela po širini ili visini, onda je bolje da je komprimirate u grafičkom uređivaču kako bi stranica radila brže.

Kako promijeniti veličinu slike u html-u koristeći css Za promjenu veličine slike u HTML-u pomoću CSS-a, koriste se svojstvaširina (širina) i visina (visina)

unutar stilskog atributa. Možete napisati samo širinu ili visinu, a preostala neodređena vrijednost će se automatski promijeniti kako bi se zadržale proporcije slike. Na primjer, ako navedete samo širinu slike koristeći širinu, njena visina će se automatski promijeniti, zadržavajući proporcije. I obrnuto, kada navedete samo visinu, njegova širina će se također automatski promijeniti, zadržavajući proporcije slike.

Primjer koda bez specificiranja dimenzija slike

Rezultat u pretraživaču

Test stranica

Primjer koda bez specificiranja dimenzija slike

Rezultat u pretraživaču

Primjer koda za promjenu veličine slike u .css

style="width:150px; " >

Oba gore prikazana primjera koriste istu sliku veličine 300x184px (širina i visina). U primjeru 1, slika je prikazana u pretraživaču nepromijenjena s originalnom veličinom 300x184px jer širina i visina nisu specificirane u css-u. I u primjeru 2, slika je prikazana u pretraživaču smanjena za 2 puta jer je širina specificirana kao 150px, visina je automatski promijenjena na 92 ​​px. Kao što vidite, svojstvo visine uopće ne mora biti specificirano jer se automatski mijenja proporcionalno širini. Ako navedete oba parametra:širina (širina), visina (visina)

i neće odgovarati proporcijama, onda će slika imati upravo tu veličinu, ali u komprimiranom ili rastegnutom obliku, ovisno o vrijednostima.

Zašto nije preporučljivo povećavati slike

Važno: Povećanje veličine slike je praćeno gubitkom kvaliteta. Prilikom promjene na bilo koji način važno je postaviti vrijednosti ​​manje nego na originalnoj slici, odnosno samo smanjiti.

Ne znate kako povećati veličinu slike? Ovo je vrlo jednostavan zadatak jer je sve što vam je potrebno već instalirano na vašem računaru. 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 unapred instaliran na svim verzijama operativnog sistema Windows. Start> Svi programi> Pribor> Paint:

1. Prevucite sliku u prozor Paint ili je koristite Meni > Otvori (Ctrl + O).
2. U glavnom meniju programa pronađite stavku "Promena veličine" i izaberite je:

1. Otvorit će se panel za promjenu veličina i proporcija slike. Možete odrediti vrijednost u pikselima. Ne zaboravite provjeriti " Održavajte proporcije" Inače će slika biti deformisana:

1. Za povećanje veličine slike kliknite na dugme "OK" i sačuvajte fotografiju.

savjet:

• Ako ne možete veličinu svoje fotografije bez istezanja, možete koristiti alat Crop da uklonite neželjene ivice. Kako to učiniti opisano je u paragrafu 3;
• Da biste brže otvorili fotografiju, kliknite desnim tasterom miša na nju i odaberite “ Otvorite pomoću Paint-a»;
• Najbolje je da sačuvate sliku u istom formatu kao i original.

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

1. Ako Microsoft foto galerija nije instalirana na vašem računaru ( Start > Galerija fotografija), potrebno je da ga preuzmete i instalirate kao deo Windows Essentials 2012;
2. Pokrenite MS Photo Gallery i pronađite svoju grafičku datoteku;
3. Kliknite desnim tasterom miša na njega i izaberite "Promeni veličinu...":

1. Odaberite gotove postavke: " Mala 640 piksela", "Srednji 1024", "Veliki 1280" itd.

1. kliknite na " Promijenite veličinu i sačuvajte" Nakon što povećate veličinu slike, slika će biti smještena u isti folder, au njemu će ostati i original.

savjet:

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

Metoda 3: Kako promijeniti veličinu slike u Photoscapeu

Možete povećati veličinu slike u Photoshopu. Ili koristite Photoscape za ovo.

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 dugme „Promeni veličinu“, kliknite na njega.
2. Postavite novu veličinu fotografije. Provjerite opciju " Održavajte omjer širine i visine" je omogućen i pritisnite dugme "OK":

1. Sačuvajte uređenu sliku.

savjet:

• Ako trebate promijeniti veličinu više slika, koristite " Batch editor" Dodajte folder i promijenite veličinu svih fotografija u njemu;
• Ako ne znate tačnu veličinu, možete postaviti "postotak" originalne veličine.

Metoda 4. Kako promijeniti veličinu slike u IrfanView-u

1. Instalirajte IrfanView - odličan alat za gledanje i povećanje slika;
2. Dodajte fotografiju prevlačenjem u prozor programa ili klikom na prvo dugme na traci sa alatkama:

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

1. Sačuvajte sliku.

savjet:

• Možete koristiti standardne veličine: 640 x 480 piksela, 800 x 600 piksela, 1024 x 768 piksela, itd.;
• Za održavanje fotografija visokog kvaliteta, provjerite je li vaš DPI postavljen na najmanje 300.

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

1. Da promijenite veličinu slike na mreži, idite na PicResize.
2. Kliknite na dugme Pregledaj" za odabir fotografije. kliknite na " Nastavi»:

1. Odaberite postotak originalne slike, na primjer 50% manji. Alat će prikazati veličinu izlazne slike. Alternativno, možete unijeti svoju tačnu veličinu odabirom " Custom Size»:

Prije odgovora na pitanje " kako ubaciti sliku u HTML?“, treba napomenuti da se ne isplati preopteretiti web stranice ogromnom količinom grafičkog materijala, jer to ne samo da će poboljšati vizualnu percepciju resursa od strane korisnika, već će i povećati vrijeme učitavanja stranice.

Prilikom kreiranja web stranica najčešće korišteni grafički formati su PNG, GIF i JPEG, a za dizajnerski rad sa slikama grafički uređivač Adobe Photoshop, koji ima bogate mogućnosti za komprimiranje i promjenu veličine slika bez gubitka kvaliteta, što je nevjerovatno važno za web razvoj. .

Kako umetnuti sliku u HTML?

Da biste umetnuli sliku u HTML stranicu, koristite jednu jednostavnu oznaku:

,

gdje je xxx adresa slike. Ako je slika u istom direktoriju kao i stranica, oznaka će izgledati ovako:

Međutim, brzi i stabilni internet još uvijek nije stigao do svih krajeva svijeta, a dešava se da se slika na web stranici jednostavno ne učitava. Za takve slučajeve postoji koncept alternativnog teksta.

Prikazuje se umesto slike kada je nedostupna, učitava se ili u režimu rada pretraživača „bez slika“. Dodaje se pomoću atributa oznake alt .

Primjer dodavanja alternativnog teksta u grafičku datoteku:

Dodjeljivanje veličina slika u HTML-u

Da biste promijenili dimenzije prikaza grafičke datoteke, koristite oznake visine i širine, gdje je visina visina, a širina širina, mjerena u pikselima.

Kada koristi ove atribute, pretraživač prvo izdvaja prostor za grafički sadržaj, priprema ukupni izgled stranice, prikazuje tekst, a zatim učitava samu sliku.

Slika se postavlja u pravougaonik sa zadatim dimenzijama, a ako su parametri manji ili veći od originalnih, slika se rasteže ili kompresuje.

Ako se ne koriste atributi visine i širine, pretraživač odmah učitava sliku, odgađajući prikaz teksta i drugih elemenata stranice.

Ovi parametri se mogu specificirati i u pikselima (veličina slike je konstantna i ne ovisi o rezoluciji ekrana korisnika) i u procentima (veličina slike ovisi o rezoluciji ekrana).

na primjer:

Treba imati na umu da je u trenutku kada promijenite originalnu veličinu slike potrebno zadržati njene proporcije.

Da biste to učinili, dovoljno je navesti vrijednost samo jednog od parametara ( širina ili visina), a pretraživač će automatski izračunati vrijednost drugog.

Lokacija slike u HTML-u

Kao i kod mnogih HTML oznaka, Primijenite atribut align, koji poravnava sliku:

- slika se nalazi iznad teksta;

- slika se nalazi ispod teksta;

- slika se nalazi lijevo od teksta;

- slika se nalazi desno od teksta.

Slika link

To se radi na sljedeći način:

Kao što vidite, grafički umetak može biti veza i, kada se klikne, preusmjeriti na bilo koju adresu napisanu u punom ili skraćenom obliku.

Kako mogu napraviti sliku kao pozadinu u HTML-u?

Slika se ne može samo umetnuti na stranicu kao vidljivi objekt, već i napraviti pozadinu. Da biste definisali sliku kao pozadinu, potrebno je da navedete atribut background=”xxx” u oznaci, gde je xxx adresa slike, navedena na isti način kao u gornjim primerima.

Na primjer, postavimo sljedeću sliku teksture kao pozadinu:

Spremite sliku u folder sa pripremljenom stranicom i napišite sljedeće redove:

Pozadina s tekstom.

Pozadinska slika na stranici je postavljena.

Uputstva

Prvo pokušajte pronaći sliku pomoću tražilica. Unesite svoj upit, a zatim odaberite karticu postavki pretraživanja. Za Google, na primjer, ovo je dugme „Alati za pretraživanje“, a za Yandex ikona sa klizačima. Zatim morate odabrati “Size” i navesti tačne vrijednosti. Ili, na primjer, ako vam je potrebna fotografija dobre rezolucije, odaberite "Velika".

Ako nema slike potrebne veličine, možete je sami uklopiti u okvir. Postoje načini. Prvi je da prvo kreirate dokument željene veličine, a zatim promijenite sliku. Drugi je suprotan - otvorite sliku i promijenite veličinu. U suštini nema razlike: sve zavisi od vaših preferencija i ciljeva. Primjeri će biti prikazani u Adobe Photoshopu, ali možete koristiti i druge grafičke uređivače.

Prvi način. Kliknite "Datoteka" - "Novo..." ili kombinaciju tipki Ctrl+N. Pred vama će se pojaviti prozor sa postavkama. Tamo navedite širinu, visinu i potrebne parametre rezolucije boje. Zatim otvorite sliku koja vam se sviđa u pretraživaču, kliknite desnim tasterom miša i izaberite „Kopiraj sliku“. Zatim se vratite u program i pritisnite Ctrl+V.

Slika će se pojaviti u prozoru grafičkog uređivača. Zatim kliknite "Uredi" - "Slobodna transformacija" ili kombinaciju Ctrl + T. Pojavit će se ključne tačke pomoću kojih možete prilagoditi sliku veličini radnog prozora. Čim dobijete željeni rezultat (usput, možete izaći izvan granica radnog područja), kliknite "Datoteka" - "Spremi kao ..." ili kombinaciju tipki Ctrl + S.

Drugi način. Prvo morate otići na svoj računar, zatim kliknuti na "Datoteka" - "Otvori ..." (ili kombinaciju Ctrl + O) i odabrati željenu sliku. Zatim odaberite “Slika” - “Veličina slike...” ili pritisnite kombinaciju Alt+Ctrl+I. Poništite izbor "Održavanje proporcija" i odredite željenu veličinu. Zatim pritisnite OK.

Za promjenu veličine slike pomoću HTML oznaka Navedeni su atributi širina (širina) i visina (visina). Pikseli se koriste kao vrijednost, a argumenti moraju odgovarati fizičkim dimenzijama slike. Na primjer, na sl. Slika 10.6 prikazuje sliku koja ima dimenzije 100x111 piksela.

Rice. 10.6. Slika originalne veličine

Shodno tome, HTML kod za postavljanje ove slike dat je u primjeru 10.4.

Primjer 10.4. Dimenzije crteža

Ako su dimenzije slike eksplicitno specificirane, pretraživač ih koristi da prikaže praznu oblast koja odgovara slici tokom procesa učitavanja dokumenta (slika 10.7). U suprotnom, pretraživač čeka da se slika potpuno učita, nakon čega mijenja širinu i visinu slike (slika 10.8).

U tom slučaju, tekst se može preformatirati, jer originalna veličina slike nije poznata i automatski se podešava na malu veličinu.

Rice. 10.7. Dimenzije slike nisu naznačene i još se nije učitala

Rice. 10.8. Slika je učitana, tekst je ponovo formatiran

Širina i visina slike mogu se mijenjati na manju ili veću.

Međutim, to ni na koji način ne utiče na brzinu učitavanja slike, jer veličina datoteke ostaje nepromijenjena. Stoga, umanjujte s oprezom jer... Ovo može izazvati zabunu među čitaocima zašto se tako mala slika tako dugo učitava. Ali povećanje veličine dovodi do suprotnog efekta - veličina slike je velika, ali se datoteka brže učitava u odnosu na sliku iste veličine.

Na sl. 10.9 prikazuje istu sliku kao što je prikazano na Sl. 10.6, ali sa duplo većom širinom i visinom.

Rice. 10.9. Prikaz slike uvećan u pretraživaču

Primjer 10.5. Promjena veličine slike

Povećanje veličine slike

Ova promjena veličine se naziva resampling, a algoritam pretraživača je inferioran u mogućnostima u odnosu na grafičke uređivače. Stoga je potrebno uvećati slike na ovaj način samo u posebnim slučajevima, inače se kvalitet slike previše pogoršava. Bolje je koristiti neku vrstu grafičkog programa.