Cum de a schimba imaginea în HTML. Imagini și proprietățile acestora în CSS. Codul eșantionului cu o modificare a dimensiunii imaginii V.CSS

Această lecție este un fel de continuare a celui anterior, în care am luat în considerare, este timpul să vă aprofundați cunoștințele și să vedem Proprietăți CSS Imagini.

Dimensiunile imaginii în CSS

Să ne dăm seama ce este nou aici, am creat o clasă IMG în care dimensiunea imaginii, lățimea este lățimea și înălțimile avem o înălțime, dimensiuni pe care le-am specificat mai original, astfel încât să puteți vedea clar imaginea.

Pentru claritate, voi da un exemplu în care va fi o mulțime de text și veți vedea ce indicii din imagine sunt în acest exemplu Vom folosi proprietatea marjei care vă va oferi posibilitatea de a aprecia capacitățile sale.

Pentru claritate, voi da un exemplu în care va exista o mulțime de text și veți vedea ce indicii din imagine sunt în acest exemplu vom folosi imaginea fără a specifica liniuțele astfel încât să puteți vedea clar diferența.

În browser vedem următoarele:

Am făcut indicii din imagine în acest exemplu datorită parametrului de marjă care ne-a cerut liniuță de la toate cele patru margini de 20 de pixeli. Aici puteți face mai multă manipulare cunnică, puteți seta o liniuță de la o anumită margine, de exemplu:

• margin-top - liniuță din partea de sus
• margin-dreapta - liniuță din partea dreaptă
• margin-Bottom - Pulbere de noapte
• margin-stânga - liniuță din partea stângă

În consecință, aici puteți seta din ce în ce mai subtil sau puteți cere o liniuță din una sau două părți nu atinge pe alții.

În browser:

Specificați cadrul din jurul imaginii, datorită parametrului de frontieră pentru a porni, setați lățimea cadrului folosind lățimea de margine, specificăm-o în pixeli, apoi stilul cadrului, adică tipul de stil de frontieră aici au mai multe valori Pentru a vă alege:

Și ultimul parametru pe care vom ajusta această culoare a cadrului specificat de parametrul de culoare la frontieră.

În browserul vedem:

După cum ați înțeles, am atribuit fundalul etichetei corpului datorită selectorului de etichete, deoarece ocupă întregul document de la noi, putem desemna și alte etichete. Parametrul de fundal ne-a făcut fundalul adresei imaginii la care ne prescriem în paranteze. De asemenea, puteți manipula cu fundalul, de exemplu:

fundal: URL (ProBa.png) Repeat-X;

Fundalul va fi repetat numai de-a lungul axei X, adică orizontal într-o singură linie.

fundal: URL (ProBa.png) Repetați-Y;

Fundalul va fi repetat numai de-a lungul axei Y care este vertical într-o singură linie.

fundal: URL (ProBa.png) No-Repeat;

Fundalul nu va fi repetat, dar va apărea o singură imagine.

dimensiune de fundal: 500px 200px;

Acesta este un parametru suplimentar care stabilește dimensiunea imaginii pentru fundal, lățime și înălțime.

Transparența imaginii cu CSS

În browser vedem următoarele:

Această proprietate a venit cu apariția CSS3 și a avut suficientă aplicație extinsă. Este implementat utilizând parametrul opacității Setează transparența imaginii, valorile de la 0 la 1 și cel de-al doilea filtru parametru: alfa (opacitate \u003d 50); face cel mai mult pentru motor de cautare Explorierul de la vechile versiuni nu suportă parametrul de opacitate, valori de la 0 la 100. În exemplul, am făcut în mod specific două imagini pentru a vedea clar diferența.

La această lecție, proprietățile de proprietate CSS se termină, sper că această lecție a fost utilă pentru dvs. și a inspirat să studiați în continuare limba și să primiți noi cunoștințe.

Data publicării: 2014-04-22

Imaginile constituind aproape orice site, deci fără a se redimensiona nu este necesar. Puteți schimba dimensiunea imaginii în 2 moduri: în editor grafic sau programatic B. codul HTML. pe css.

Dacă in. cod CSS. HTML nu setă de dimensiunea imaginii, apoi înălțimea și lățimea pe site vor fi aceleași în pixeli ca fișier sursă.. Adică, puteți schimba dimensiunea imaginii fără CSS și HTML utilizând, numai un editor grafic și se va schimba automat pe site, dacă nu specificați dimensiunea acestuia. Dar există cazuri atunci când este necesar să modificați programatic dimensiunea imaginii în CSS pe HTML.

1. Schimbați imaginea într-un editor grafic

Puteți schimba dimensiunea imaginii în orice editor grafic (Photoshop, Gimp, Xnview) și se va schimba automat pe site în funcție de dimensiunile originale.

Plusurile metodei:

Imaginea este încărcată mai repede, deoarece nu este nevoie să descărcați date suplimentare (pixeli), care vor fi apoi comprimate programatic.

Minusuri:

Editorii grafici sunt imagini slab comprimate cu mai puțin de 200 de pixeli în lățime și înălțime.

Întotdeauna atunci când este posibil și încercați în mod corespunzător să schimbați dimensiunea în editorul grafic, astfel încât imaginile să fie încărcate mai repede decât atunci când schimbarea programatică. Diferența de viteză poate fi zeci de ori.

2. Schimbați imaginea în codul CSS de pe site

Pro:

Mai rapid și mai convenabil pentru a seta dimensiunea. Aceasta metoda Reducerea imaginii este de obicei utilizată pentru comoditate. De exemplu, atunci când o imagine poate avea multe dimensiuni diferite - este adesea mai convenabil să schimbați valorile aceluiași și aceleași programate decât pentru a încărca toate variantele formatelor unei imagini editate în editorul grafic.

Imagini mici, mai puțin de 200 de pixeli în înălțime sau lățime, spre deosebire de editorii grafici, sunt bine comprimate. Dacă doriți ca dimensiunea imaginii să fie mai mică de 200 de pixeli pe site, este mai bine ca dimensiunea inițială să fie mai mult cu 30-50% (260-300 pixeli) pentru a salva calitate bună Cu o scădere.

În același timp, diferența în viteza de descărcare a site-ului nu va fi resimțită. De. Imaginile mici ocupă foarte puțin spațiu și cu o creștere a dimensiunii lor cu 30%, nu veți observa modificări. Dar diferența este vizibilă.

Minusuri:

Imagini, comprimate programate, mai lungi sunt încărcate t. K. Schimbarea dimensiunii are loc numai după descărcarea versiunii originale. Prin urmare, dacă dimensiunea imaginii este mai mare de 200 de pixeli în lățime sau înălțime, este mai bine să comprimați într-un editor grafic, astfel încât site-ul să funcționeze mai repede.

Cum se redresează imaginile în HTML utilizând CSS

Pentru a redimensiona imaginea în instrumentele HTML CSS utilizate Proprietăți lățime (lățime) și înălțime (înălțime) În interiorul atributului de stil. Puteți scrie doar lățimea sau înălțimea, iar valoarea rămasă nespecificată se va schimba automat cu conservarea proporțiilor imaginii. De exemplu, specificând lățimea imaginii folosind lățimea, înălțimea (înălțimea) se va schimba automat, păstrând proporția. Și invers, atunci când specificați numai înălțimi (înălțime), lățimea sa se va schimba automat, salvând proporțiile imaginii.

Codul eșantionului fără a specifica dimensiunea imaginii

Rezultatul în browser

Codul paginii

Codul eșantionului cu o modificare a dimensiunii imaginii V.CSS

Rezultatul în browser

Codul paginii

Stil \u003d "Lățime: 150px;"\u003e

În ambele exemple, aceeași imagine prezentată mai sus este aceeași imagine cu o dimensiune de 300x184px (lățime și înălțime). În 1 exemplu, imaginea a fost afișată în browser neschimbată cu dimensiunea originală de 300x184px t. La. CSS nu a indicat lățimea și înălțimea. Și în 2 exemplu, imaginea a fost afișată în browser redus de 2 ori t. La. La temperatura de 150px a fost indicată, înălțimea este schimbată automat la 92 px. După cum puteți vedea, proprietatea înălțimii, nu puteți specifica deloc deoarece se schimbă automat proporțional cu lățimea.

Dacă specificați ambii parametri: lățime (lățime), înălțime (înălțime) Și nu vor corespunde proporțiilor, atunci imaginea va avea exact o dimensiune, ci într-o formă comprimată sau întinsă, în funcție de valori.

De ce este nedorit să măriți imaginile

Important: O creștere a dimensiunii imaginii este însoțită de pierderea calității. Când schimbați în orice mod, este important să setați valorile mai puțin decât în \u200b\u200bimaginea originală, adică numai pentru a reduce.

Dacă setați dimensiunea în pixeli mai mult decât imaginea sursă, calitatea se va deteriora. Iar pierderea de calitate va fi clar vizibilă, deoarece computerul nu poate adăuga pixeli noi, poate crește doar dimensiunea celor existente. Cu cât este mai mare creșterea imaginii de la valoarea sursei, cu atât mai rău calitatea acestuia și pixelii pătrați sunt clar vizibili.

Pentru a schimba dimensiunea desenului cu HTML la etichetă Sunt furnizate atributele lățimii (lățimea) și înălțimea (înălțimea). Pixelii sunt utilizați ca valoare, în timp ce argumentele trebuie să coincidă cu dimensiunile fizice ale imaginii. De exemplu, în fig. 10.6 Imaginea este afișată care are dimensiuni de 100x111 pixeli.

Smochin. 10.6. Imagine a dimensiunii originale

În consecință, codul HTML pentru a găzdui acest model este prezentat în Exemplul 10.4.

Exemplul 10.4. Dimensiunile figurii

Dacă dimensiunile imaginii sunt specificate explicit, browserul le utilizează pentru a afișa o zonă goală în procesul de încărcare a documentului (figura 10.7). În caz contrar, browserul așteaptă ca desenul să se încarce complet, după care modifică lățimea și înălțimea imaginii (figura 10.8). În același timp, poate apărea reformatarea textului, deoarece dimensiunea inițială a imaginii nu este cunoscută și instalată automat.

Smochin. 10.7. Dimensiunile imaginilor nu sunt indicate și nu a fost încă boot

Smochin. 10.8. Imaginea este încărcată, textul este reformatat.

Lățimea și înălțimea imaginii pot fi modificate atât la o parte mai mică, cât și cea mai mare. Cu toate acestea, viteza de desen nu afectează viteza imaginii, deoarece dimensiunea fișierului rămâne neschimbată. Prin urmare, reduceți imaginea cu prudență, deoarece Acest lucru poate provoca uimire de la cititori, motiv pentru care un astfel de desen mic este atât de mult încărcat. Dar creșterea dimensiunii duce la efectul opus - dimensiunea imaginii este mare, dar fișierul în raport cu imaginea de aceeași dimensiune este încărcat mai repede.

În fig. 10.9 prezintă aceeași imagine așa cum se arată în fig. 10.6, dar cu o lățime dublă crescută și înălțime.

Smochin. 10.9. Vizualizarea imaginii mărită în browser

Codul pentru o astfel de cifră va rămâne aproape neschimbat și este prezentat în Exemplul 10.5.

Exemplul 10.5. Schimbarea dimensiunii cifrei

O astfel de modificare a dimensiunii este numită rezervor, în timp ce algoritmul browserului din capabilitățile sale este inferior editorilor grafici. Prin urmare, este necesar să se mărească imaginea în acest mod numai în cazuri speciale, iar calitatea imaginii este prea agravată. Este mai bine să profitați de un anumit program grafic. Excepțiile sunt desene care conțin zone dreptunghiulare. În fig. 10.10 Un model al unui model care ocupă 54 de octeți și are o dimensiune inițială de 8 până la 8 pixeli, a crescut la 150 de pixeli.

Smochin. 10.10. A crescut imaginea

Browserele utilizează două algoritmuri pentru a surprinde - Bicubic (oferă frontierele netezite și gama de culori netedă) și în conformitate cu punctele apropiate (salvează setul original de culori și claritate a marginilor). Cele mai recente versiuni ale browserelor sunt folosite de un algoritm bicubic și de browsere vechi, dimpotrivă, algoritmul din cele mai apropiate puncte.

Dimensiunea fotografiei va fi modificată ținând cont de dimensiunea specificată în centimetri (milimetri, inci), precum și luând în considerare dimensiunea specificată în DPI, în conformitate cu standardele de imprimare a hârtiei. Dimensiunile în cm, mm și inci pot fi indicate cu o precizie de mii, de exemplu, în loc de formatul 15x10, este posibil să se stabilească 15,201x10,203 cm.

Tabel cu dimensiuni standard de fotografii cu o poziție verticală (portret):

Formatare fotografie în centimetri (cm)	Dimensiune în milimetri (mm)	Dimensiune în pixeli (Pentru imprimare 300 dpi.)	Rata de aspect (cu orientare peisaj)
3x4. (după trimiterea mâinii)	30x40.	354x472.	4:3 (1.33)
3.5x4.5. (după trimiterea mâinii)	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)

Dimensiune standard de hârtie hârtie formatul A4. - 21x29,7 cm sau 2480x3508 pixeli la 300 dpi. Dimensiunile altor formate de foi pot fi văzute pe pagina Wikipedia, dar nu uitați că există dimensiuni în milimetri și inci, adică. În setările de pe această pagină trebuie să selectați valoarea corespunzătoare.

Dacă doriți să modificați dimensiunea fotografiei fără DPI (DPI), adică numai în urma proporțiilor formatului specificat, atunci pentru aceasta trebuie să setați parametrul "DIM DPI" la "0" în setări.

Imaginea sursă nu se schimbă. Veți fi furnizat cu o altă imagine procesată.

1) Specificați imaginea în format BMP, GIF, JPEG, PNG, TIFF:

2) Introduceți formatul de fotografie dorit în centimetri, milimetri sau în inci
Formatul dorit: X. În milimetri (mm) centimetri (cm) inci (inci)
(Format specificat prestabilit 15x10.care se potrivește pentru album. (orizontală), pentru portret (verticale) fotografii Aceste valori trebuie să fie schimbate, adică specificați 10x15., așa cum este indicat în tabel) Dimensiune în dpi: (0 \u003d "Nu considerați dpi, pentru a face o proporție bazată pe formatul specificat")
(Dimensiunea imaginii sursei JPG în dpi poate fi considerată metadate) Tipul schimbării dimensiunii este exactă la dimensiunile specificate:
Cu respectarea proporțiilor și tăierea marginilor inutile
Rubrica de întindere sau îngustare, fără tăiere
Fără tăiere, cu adăugarea unui roz roșu purpuriu albastru turcoaz verde verde verde galben culoare gri deschis fundal alb de deasupra marginilor care trebuie atașate la: partea superioară stânga centrală dreapta a imaginii

Nu știți cum să măriți dimensiunea imaginii? Aceasta este o sarcină foarte simplă, deoarece tot ceea ce aveți nevoie este deja instalat pe computer. Citiți acest manual și veți învăța cum să modificați dimensiunea fotografiei utilizând 5 unelte simple.

Metoda 1. Cum de a redimensiona imaginile din Microsoft Paint

1. Găsiți și executați doamna vopsea. Este preinstalat pe toate versiunile sistemului de operare. Ferestre. Start\u003e Toate programele\u003e Standard\u003e Paint:

1. Luați imaginea în fereastra de vopsea sau utilizați Meniu\u003e Deschidere (Ctrl + O).
2. În meniul principal al programului, găsiți elementul "Redimensionați" și selectați-l:

1. Se deschide panoul de schimbare a imaginii și al proporțiilor imaginii. Puteți specifica valoarea în pixeli. Nu uitați să verificați caseta de selectare " Salvați proporții" În caz contrar, imaginea va fi deformată:

1. Pentru a mări dimensiunea imaginii, faceți clic pe butonul "OK" și salvați fotografia.

Sfat:

• Dacă nu reușește să setați fotografiile dorite, fără să o întindeți, puteți utiliza instrumentul "Tuning" pentru a elimina marginile inutile. Cum se face acest lucru, descris la punctul 3;
• Pentru a deschide fotografia mai rapidă, faceți clic pe acesta Faceți clic dreapta pe și selectați elementul de element din meniul contextual Deschis cu vopsea»;
• Cel mai bine este să salvați imaginea în același format ca și originalul.

Metoda 2. Cum se redimensionează imaginile din Galeria Foto MS

1. Dacă galeria foto Microsoft nu este instalată pe computer ( Start\u003e Galerie foto), trebuie să îl descărcați și să îl instalați ca parte a Windows Essentials 2012;
2. Rulați galeria foto MS și găsiți fișierul grafic;
3. Faceți clic pe acesta faceți clic dreapta și selectați "Schimbați dimensiunea ...":

1. Alegeți o presetare gata: " Mici 640 pixeli"," Mijlocul 1024 "," Big 1280 ", etc.

1. Faceți clic pe " Redimensionați și salvați" După ce creșteți dimensiunea imaginii, imaginea va fi plasată în același folder, va rămâne și originalul.

Sfat:

• Dacă aveți nevoie să specificați dimensiunea exactă a imaginii, în meniul derulant, selectați " Personalizat"Și setați dimensiunea cea mai mare parte a fotografiei;
• Pentru a schimba dimensiunea mai multor fotografii în același timp, selectați-le ținând apăsată tasta CTRL.

Metoda 3. Cum să modificați dimensiunea imaginii în Photoscape

Puteți mări dimensiunea imaginii în Photoshop. Sau utilizați pentru acest fotosacape.

1. Încărcați Photoscape și instalați-l. Executați programul;
2. Faceți clic pe fila "Editor" și găsiți fotografia pe care doriți să o modificați:

1. În partea de jos a imaginii există un buton "Redimension", faceți clic pe acesta.
2. Setați o nouă dimensiune a fotografiilor. Asigurați-vă că opțiunea " Păstrați raportul dintre părți»Activat și faceți clic pe" OK ":

1. Salvați imaginea editată.

Sfat:

• Dacă aveți nevoie să schimbați dimensiunea mai multor imagini, utilizați fila " Editorul batch." Adăugați un dosar și modificați dimensiunea tuturor fotografiilor din acesta;
• Dacă nu știți dimensiunea exactă, puteți seta "procentul" de la dimensiunea sursei.

Metoda 4. Cum să redimensionați imaginile din Irfanview

1. Instalați Irfanview - un instrument excelent pentru vizualizarea și creșterea dimensiunii imaginii;
2. Adăugați o fotografie prin faptul că a aruncat-o în fereastra programului sau făcând clic pe primul buton din bara de instrumente:

1. Faceți clic pe fila "Image", selectați " Dimensiune / proporție» ( Ctrl + R.);
2. Instalați noua dimensiune în pixeli, centimetri, inci sau ca procent din imaginea originală:

1. Salvați imaginea.

Sfat:

• Puteți utiliza dimensiuni standard: 640 pe 480 pixeli, 800 la 600 pixeli, 1024 la 768 pixeli etc.;
• Pentru a salva fotografii de înaltă calitate, asigurați-vă că valoarea de cel puțin 300 este setată pentru parametrul DPI.

Metoda 5. Cum să modificați dimensiunea imaginii online

1. Pentru a mări dimensiunea imaginii online, mergeți la site-ul Picresize.
2. Apasă pe " Naviga."Pentru a alege o fotografie. Faceți clic pe " Continua.»:

1. Selectați procentajul imaginii originale, de exemplu, cu 50% mai puțin. Instrumentul afișează dimensiunea imaginii la ieșire. Alternativ, puteți introduce dimensiunea exactă selectând în elementul de meniu drop-down " Marime personalizata»: