Slika je skladište za praktički bilo koju stranicu, ne može bez promjene u svijetu. Veličinu slike možete promijeniti na dva načina: pomoću grafičkog uređivača ili programski u html kodu u css.
Ako veličinu slike u css kodu ne postavite na html, njezina visina i širina na stranici bit će ista za piksele, kao i za izlaznu datoteku. Dakle, možete promijeniti veličinu slike bez css-a i html-a, koristeći grafički editor i ona će se automatski promijeniti na stranici, tako da ne trebate mijenjati veličinu. Ali je vypadki, ako je potrebno programski promijeniti veličinu css slike u html.
1. Promjena slika pomoću grafičkog uređivača
Možete promijeniti veličinu slike u bilo kojem grafičkom uređivaču (photoshop, gimp, xnview) i ona će se automatski promijeniti na web stranici u originalnu promjenu veličine.
Prednosti metode:
Slika je poželjnija, krhotine ne trebaju hvatati ulazne podatke (piksele), jer će se onda programski istiskivati.
Protiv:
Grafički uređivači netočno istiskuju slike manje od 200 piksela po širini i visini.
Uvijek, ako je moguće i koliko je to moguće, pokušajte sami promijeniti izgled u grafičkom editoru, kako bi slike bile više zapetljane, niže kada promijenite program. Maloprodajna cijena swidkosta može postati desetke puta.
2. Promjena slika u CSS kodu na stranici
Prednosti:
Lakše je postaviti rozmír. Ovaj način promjene slike zvuči zastosovuetsya radi jasnoće. Na primjer, ako na jednoj slici može biti puno različitih promjena - često je lakše promijeniti vrijednosti u jednom te istom programu, a zatim preuzeti sve opcije formata na jednoj slici, uređujući u grafičkom uređivaču.
Male slike, manje od 200 piksela po visini i širini za grafičke urednike, kao da se čvrsto stisnu. Ako želite, ako je veličina slike na stranici manja od 200 piksela, onda brže, ako je veličina slike veća za 30-50% (260-300 piksela), kako bi se sačuvala dobra svjetlina prilikom promjene.
Uz svu razliku u brzini, stranica neće biti zainteresirana, jer male slike oduzimaju čak i malo vremena i s povećanjem veličine za 30%, nećete se sjećati promjene. Ale, označi razliku.
Protiv:
Slike, stilizirane programski, više su zavantazhuyutsya, oskílki zmína rozmíru vídbuvaêtsya ílki nakon zavantazhennia originalne verzije. Stoga, ako je slika proširena na više od 200 piksela po širini ili visini, onda je bolje stisnuti je u grafičkom uređivaču, kako bi stranica bolje funkcionirala.
Kako promijeniti veličinu slika u html-u za pomoć css-u
Kako promijeniti veličinu slike u html-u koristeći css širina (širina) i visina (visina) u sredini je atribut stila. Možete napisati samo širinu ili visinu, a ako nije navedeno, vrijednost će se automatski promijeniti kako bi se spremio omjer slike. Na primjer, navođenjem samo širine slike za dodatnu širinu, njezina će se visina automatski promijeniti, uzimajući proporcije. Prije svega, kada odredite samo visinu, širina će se također automatski promijeniti, odabirom proporcija slike.
Šifra stražnjice bez umetanja slike
Rezultat u pregledniku
Šifra stranke
Primjer koda za promjenu veličine slike u .css
Rezultat u pregledniku
Šifra stranke
style="width:150px; ">
U obje stražnjice, prikazuje više vikoristan iste slike veličine 300x184px (širina i visina). U 1 primjeru, slika je prikazana u pregledniku bez promjene s izvornom veličinom 300x184px, jer širina i visina nisu specificirane u css-u. I u 2 aplikacije, slika se pojavila u pregledniku promijenjena 2 puta na činjenicu da je širina postavljena na 150px, visina je automatski promijenjena na 92 px. Kao što vidite, moć visine može se zanemariti činjenicom da se automatski mijenja proporcionalno širini.
Kako unositi obavezne parametre: širina (širina), visina (visina) a smrad ne odgovara omjerima, onda je slika same majke takav ružmarin, ali u tijesnom či ispruženom, to je ugar vrijednost.
Zašto nije potrebno dodavati slike
Važno: Povećano proširenje slike popraćeno je drugom kvalitetom. Prilikom mijenjanja, bilo na neki način, važno je staviti vrijednost manje, niže u originalnu sliku, pa je manja vjerojatnost da će se promijeniti.
Ako postavite veličinu piksela da bude veća, niža u izlaznoj slici, tada će se svjetlina smanjiti. Gubitak svjetline bit će jasno vidljiv, tako da računalo ne može dodati nove piksele, može samo poboljšati informacije. Što je slika više uvećana u smislu njene vanjske vrijednosti, to je slika svjetlija i kvadratni pikseli jasniji.
Veličina fotografije će se mijenjati zbog poboljšanja zadane veličine u centimetrima (milimetrima, inčima), kao i zbog poboljšanja zadane veličine DPI, vjerojatno prema standardima papirnatog prijatelja. Veličine cm, mm i inči mogu se odrediti s preciznošću do tisućinki, na primjer, umjesto formata 15x10, možete postaviti 15,201x10,203 cm.
Tablica sa standardnim veličinama fotografija u okomitom (portretnom) položaju:
| Format fotografije u centimetrima (cm) | Veličina u milimetrima (mm) | Proširi za piksele (za prijatelja 300 dpi) |
Spivvídnoshnja storín (Kada je pejzažna orijentacija) |
| 3x4 (nakon ručnog rezanja) | 30x40 | 354x472 | 4:3 (1.33) |
| 3,5x4,5 (nakon ručnog rezanja) | 35x45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89x127 | 1063x1535 | 10:7 (1.43) |
| 10x15 | 102x152 | 1181x1772 | 3:2 (1.5) |
| 13x18 | 127x178 | 1535x2126 | 7:5 (1.4) |
| 15x20(≈A5) | 152x203 | 1772x2362 | 4:3 (1.33) |
| 15x21 | 152x216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20x30(≈A4) | 203x305 | 2362x3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543x5315 | 3:2 (1.5) |
List papira standardne veličine A4 format- 21×29,7 cm ili 2480×3508 piksela pri 300 dpi. Dimenzije drugih formata možete provjeriti u arkadama na strani Wikipedije, ali samo nemojte zaboraviti da postoje preraspodjele dimenzija u milimetrima i inčima, tj. u slučaju podešavanja na drugoj strani potrebno je odabrati odgovarajuću vrijednost.
Ako trebate promijeniti veličinu fotografije bez podešavanja DPI-a (točaka po inču), tada morate u postavkama postaviti parametar "DPI Size" na "0".
Izvana slika se ne mijenja. Dobit ćete još jednu uređenu sliku.
Persh niže mišljenje o opskrbi " kako umetnuti sliku u html?“, pored naznačiti kako promijeniti web stranicu s velikom količinom grafičkog materijala nije varto, poboljšati vizualizaciju resursa korištuvačem, ali i povećati sat zanimanja strane.
Prilikom izrade web stranica većina njih koristi grafičke formate PNG, GIF i JPEG, a za dizajn sa slikama koristi se grafički uređivač Adobe Photoshop koji ima puno mogućnosti za utiskivanje i promjenu veličine slike bez gubitka svjetline, što jednako je važno za web pinking.
Kako umetnuti sliku u HTML?
Da biste umetnuli sliku na HTML stranu, nacrta se jedna jednostavna oznaka:
,
de xxx su adrese slika. U tom slučaju, ako je slika u istom direktoriju na istoj strani, oznaka će izgledati ovako:
Međutim, švedski i stabilan internet još nije dostupan u svim krajevima svijeta, a slika na web stranici jednostavno nije privlačna. Za takve poglede može se razumjeti alternativni tekst.
Vino se prikazuje na prostoru slike u trenutku nedostupnosti ili kada je u radnom modu preglednika bez slika. Dodavanje VIN-a za pomoć atributu alt oznake .
Primjer dodavanja alternativnog teksta u grafičku datoteku:
Dodjela preslikavanja slike u HTML-u
Da biste promijenili veličinu grafičke datoteke, odaberite oznake visine i širine, gdje je visina visina, a širina širina, koja je postavljena u pikselima.
Kod drugačijeg odabira ovih atributa, preglednik vidi mjesto za grafički sadržaj, priprema podebljani izgled stranice, prikazuje tekst, nakon čega snima samu sliku.
Mališani se postavljaju na kvadrat zadanih dimenzija, a u tom slučaju, kako su parametri manji ili veći za vikend, slika se širi ili smanjuje.
Ako atributi visine i širine nisu odabrani, preglednik će snimiti sliku obrezujući prikaz teksta tih drugih elemenata stranice.
Ovi parametri se mogu specificirati i za piksele (veličina slike je konstantna i da ne leži u prostoru ekrana koristuvacha), i za prozore (veličina slike da leži u prostoru ekrana) .
Na primjer:
Imajte na umu da je u ovom trenutku, ako promijenite vanjsku veličinu slike, potrebno uzeti ovaj omjer.
Za što je dovoljno navesti vrijednost više od jednog parametara ( širina i visina), a vrijednosti drugog preglednika će se automatski izračunati.
Raztashuvannya slike u HTML-u
Kako obogatiti HTML oznake, do zastosovuêmo atribut align , koji vykonuê vyrivnyuvannya sliku:
- slika se ističe više od teksta;
- slika se postavlja ispod teksta;
- slika je rastrgana tekstom;
- Slika je rotirana desno u odnosu na tekst.
Slika-moguća
Borite se ovako:
Poput bachita, grafičko umetanje može se forsirati i, kada se pritisne, preusmjeriti na adresu, napisanu u punoj ili skraćenoj verziji.
Kako stvoriti sliku kao pozadinu u HTML-u?
Slika se ne može samo umetnuti sa strane kao vidljivi objekt, već i stvoriti pozadinu. Za označavanje slike kao pozadine potrebno je u sažetku upisati atribut background=”xxx”, gdje je xxx adresa slike, upisana na isti način, kao i u više.
Na primjer, dodijelimo sljedeću sliku teksture kao pozadinu:
Spremite sliku u papinu s pripremljene strane i zapišite sljedeće retke:
Pozadina s tekstom.
Pozadinska slika sa strane zadatka.
Za promjenu veličine malenog koristeći HTML za oznaku proslijeđeni atributi width (width) i height (height). Kao i značenja piksela, piksel je razlog zašto su fizičke dimenzije slike različite. Na primjer, na sl. 10.6 prikazuje sliku veličine 100x111 piksela.
Riža. 10.6. Slika vanjskog svijeta
Očito, HTML kod za postavljanje ovog mališana nalazi se u dodatku 10.4.
Primjer 10.4. Ružmarin beba
Kako bi eksplicitno navedenu sliku proširio, preglednik je koristi za prikaz praznog područja slike u procesu snimanja dokumenta (mali 10.7). Na drugačiji način preglednik provjerava jesu li mališani više zainteresirani za to, nakon čega mijenja širinu i visinu slike (sl. 10.8). Kad god se tekst može preformatirati, dijelovi slike se ne prikazuju i vino se automatski postavlja na malu veličinu.
Riža. 10.7. Slika za proširenje nije prikazana i još uvijek nije zainteresirana
Riža. 10.8. Slika je prebrisana, tekst je ponovno formatiran
Širina i visina slike može se mijenjati kako manjoj, tako i većoj. No, mališan ne pljuje u brzinu, krhotine datoteke ostaju nepromijenjene. Stoga pažljivo promijenite sliku, jer. tse mozhe viklikati podiv chitachív, zašto tako mala beba tako dugo gleda. A os proširenja ekspanzije je dovedena do krepostnog efekta - proširenje slike je sjajno, ali datoteka druge slike slična proširenju bit će naprednija.
Na sl. 10.9 prikazuje istu sliku kao na sl. 10.6, ali s povećanom dvostrukom širinom i visinom.
Riža. 10.9. Pogledajte uvećanu sliku u pregledniku
Šifra takvog malog bit će praktički nepromjenjiva, a oznake u stražnjici 10.5.
Primjer 10.5. Zmína rozmíru mala beba
Takva se promjena naziva resampling, u kojoj je algoritam preglednika za njegove mogućnosti kompromitiran od strane grafičkih uređivača. Stoga je potrebno samo u posebnim raspoloženjima poboljšati sliku na takav način, jer se kvaliteta slike mora pogoršati. Bolje ubrzati kao grafički program. Vinyatkom ê male, poput ravnog reza. Na sl. Dana 10.10. postavljena je datoteka slikovnog uređaja koji posuđuje 54 bajta i može imati veličinu od 8 puta 8 piksela, povećavajući se do 150 piksela.
Riža. 10.10. Veća slika
Preglednici koriste dva algoritma za ponovno uzorkovanje - bikubni (daju zaglađivanje između i glatki raspon boja) i po najbližim točkama (odabir skupa boja i oštrine rubova). Preostale verzije preglednika zaustavit će algoritam kocke, a stari preglednici, s druge strane, algoritam na najbližim točkama.
Uputa
Na poleđini pokušajte saznati sliku uz pomoć poke sustava. Unesite zahtjev i odaberite karticu s završenim pretraživanjem. Google, na primjer, ima gumb "Alati za pretraživanje", a Yandex ima ikonu sa slika zvukova. Ako je potrebno, odaberite stavku "Rozmir" i navedite točnu vrijednost. Abo, na primjer, potrebno je snimiti fotografiju s velikom zgradom, da biste vidjeli "Veliku".
Iako nema slika s potrebnim rozmírom, njen okvir je moguće samostalno dizajnirati. Ovdje postoje putevi. Prvi korak je da napravite dokument od potrebne veličine, a zatim promijenite sliku. Još jedan protilezhny - pokažite sliku i promijenite veličinu. Maloprodaja je, naime, glupa: za tu namjenu sve treba ostaviti po volji. Prijavite se da budete vidljivi u programu Adobe Photoshop, ali možete koristiti i druge grafičke uređivače.
Prva metoda. Pritisnite "Datoteka" - "Stvori ..." ili kombinaciju tipki Ctrl + N. Prije nego što se pojavi vikno z nalashtuvannyami. Tu navedite parametre širine, visine i potrebnog prostora boja. Otvorimo sliku koja je bila prikladna u pregledniku, pritisnite tipku miša s desne strane i odaberite stavku "Kopiraj sliku". Vratimo se programu i pritisnite kombinaciju Ctrl + V.
Slika će se pojaviti u prozoru grafičkog uređivača. Pritisnite "Uređivanje" - "Vilne transformacije" ili kombinaciju Ctrl + T. Bit će ključne točke, uz pomoć kojih možete dobiti sliku za veličinu radnog prozora. Čim uzmete željeni rezultat (prije nego što progovorite, možete izaći izvan radnog područja), pritisnite "Datoteka" - "Spremi kao ..." ili kombinaciju tipki Ctrl + S.
Drugi način. Potrebna vam je poveznica na računalo, zatim pritisnite "File" - "Enter..." (ili kombinaciju Ctrl+O) i odaberite željenu sliku. Zatim odaberite "Slika" - "Veličina slike ..." ili pritisnite Alt + Ctrl + I. Označite okvir "Odaberi proporcije" i unesite potrebnu veličinu. Pritisnite OK.
