Cum să setați dimensiunea imaginii în html. Redimensionarea unei fotografii în centimetri pentru imprimare pe hârtie, ținând cont de DPI online. Cum se inserează o imagine în HTML

Nu știi cum să mărești dimensiunea unei imagini? Aceasta este o sarcină foarte simplă, deoarece tot ce aveți nevoie este deja instalat pe computer. Citiți acest tutorial și veți învăța cum să redimensionați o fotografie folosind 5 instrumente simple.

Metoda 1: Cum să redimensionați o imagine în Microsoft Paint

1. Găsiți și lansați MS Paint. Vine preinstalat pe toate versiunile sistem de operare Windows. Start> Toate programele> Accesorii> Paint:

1. Trageți imaginea în fereastra Paint sau utilizați Meniu > Deschide (Ctrl + O).
2. În meniul principal al programului, găsiți elementul „Redimensionare” și selectați-l:

1. Se va deschide panoul pentru modificarea dimensiunilor și proporțiilor imaginii. Puteți specifica valoarea în pixeli. Nu uitați să verificați „ Menține proporțiile" Î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 vă puteți mări fotografia fără a o întinde, puteți utiliza instrumentul Decupare pentru a elimina marginile nedorite. Cum se face acest lucru este descris în paragraful 3;
• Pentru a deschide o fotografie mai rapid, faceți clic dreapta pe ea și selectați din meniul contextual paragraful " Deschide cu Paint»;
• Cel mai bine este să salvați imaginea în același format ca originalul.

Metoda 2. Cum să redimensionați o imagine în Galeria foto MS

1. Dacă Microsoft Photo Gallery nu este instalată pe computer ( Start > Galerie foto), trebuie să îl descărcați și să îl instalați ca parte a Windows Essentials 2012;
2. Lansați MS Photo Gallery și găsiți fișierul dvs. grafic;
3. Faceți clic dreapta pe el și selectați „Redimensionare...”:

1. Selectați o presetare gata făcută: " Mic 640 pixeli", "Mediu 1024", "Mare 1280", etc.

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

Sfat:

• Dacă trebuie să setați dimensiunea exactă a imaginii, selectați „ Personalizat" și setați dimensiunea pe partea mai mare a fotografiei;
• Pentru a redimensiona mai multe fotografii simultan, selectați-le în timp ce țineți apăsată tasta Ctrl.

Metoda 3: Cum să redimensionați o imagine în Photoscape

Puteți mări dimensiunea imaginii în Photoshop. Sau folosiți Photoscape pentru asta.

1. Descărcați Photoscape și instalați-l. Lansa programul;
2. Accesați fila „Editor” și găsiți fotografia pe care doriți să o editați:

1. În partea de jos a imaginii există un buton „Redimensionare”, faceți clic pe el.
2. Setați o nouă dimensiune a fotografiei. Asigurați-vă că opțiunea " Menține raportul de aspect" este activat și apăsați butonul "OK":

1. Salvați imaginea editată.

Sfat:

• Dacă trebuie să redimensionați mai multe imagini, utilizați „ Editor de loturi" Adăugați un folder și redimensionați toate fotografiile din el;
• Dacă nu știți dimensiunea exactă, puteți seta „Procentul” din dimensiunea originală.

Metoda 4. Cum se redimensionează o imagine în IrfanView

1. Instalați IrfanView - un instrument excelent pentru vizualizarea și mărirea imaginilor;
2. Adăugați o fotografie trăgând-o în fereastra programului sau făcând clic pe primul buton din bara de instrumente:

1. Accesați fila „Imagine”, selectați „ Schimbați dimensiunea/proporțiile» ( Ctrl+R);
2. Setaț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 pe 600 pixeli, 1024 pe 768 pixeli etc.;
• A salva calitate superioară fotografii, asigurați-vă că DPI este setat la cel puțin 300.

Metoda 5. Cum să redimensionați o imagine online

1. Pentru a redimensiona o imagine online, accesați PicResize.
2. Faceți clic pe butonul Naviga" pentru a selecta o fotografie. Faceți clic pe " Continua»:

1. Selectați un procent din imaginea originală, cum ar fi cu 50% mai mic. Instrumentul va afișa dimensiunea imaginii de ieșire. Alternativ, puteți introduce dimensiunea exactă selectând „ Marime personalizata»:

Această lecție este un fel de continuare a celei anterioare, în care ne-am uitat, acum este timpul să vă aprofundați cunoștințele și să priviți Proprietăți CSS Imagini.

Dimensiunile imaginii în CSS

Să ne dăm seama ce este nou aici, am creat o clasă img în care am specificat dimensiunile imaginii, lățimea este lățimea, iar înălțimea este înălțimea, am specificat dimensiunile mai mari decât cele originale, astfel încât să puteți vedea clar cum sunt imaginea se va schimba.

Pentru claritate, voi da un exemplu în care va fi mult text și veți vedea ce liniuțe din imagine sunt în în acest exemplu Vom folosi proprietatea marjă care vă va oferi oportunitatea de a-i evalua capacitățile.

Pentru claritate, voi da un exemplu în care va fi mult text și veți vedea ce indentări sunt din imagine. În acest exemplu, vom folosi o imagine fără a specifica indentări, astfel încât să puteți vedea clar diferența.

În browser vedem următoarele:

Am făcut indentări din imaginea din acest exemplu datorită parametrului margine, care ne-a oferit indentări de 20 de pixeli de la toate cele patru margini. Aici puteți face o manipulare mai dificilă; puteți seta offset-ul de la o anumită margine, de exemplu:

• margin-top – marginea din partea de sus
• margin-right – marginea din partea dreaptă
• margin-bottom – marginea din partea de jos
• margin-left – marginea din partea stângă

În consecință, aici puteți regla totul mai fin sau puteți seta indentarea doar dintr-una sau două părți, fără a atinge celelalte.

În browser:

Setăm un cadru în jurul imaginii, datorită parametrului border, mai întâi setăm lățimea cadrului folosind border-width, îl setăm în pixeli, apoi stilul cadrului, adică aspectul său border-style, aici Există mai multe valori pe care le puteți alege:

Iar ultimul parametru pe care îl vom ajusta este culoarea chenarului, care este setată de parametrul border-color.

În browser vedem:

După cum înțelegeți, am atribuit un fundal etichetei body datorită selectorului de etichete, deoarece ocupă întregul document, îl putem atribui și altor etichete. Parametrul de fundal ne-a oferit un fundal cu o poză a adresei la care scriem între paranteze. De asemenea, puteți manipula fundalul, de exemplu:

fundal: url(proba.png) repeat-x;

Fundalul se va repeta doar de-a lungul axei X, adică orizontal pe o singură linie.

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

Fundalul se va repeta doar de-a lungul axei Y, adică vertical pe o singură linie.

fundal: url(proba.png) no-repeat;

Fundalul nu se va repeta și va apărea o singură imagine.

dimensiunea fundalului: 500px 200px;

Acest parametru suplimentar, care specifică dimensiunea imaginii pentru fundal, lățime și înălțime.

Faceți o imagine transparentă folosind CSS

În browser vedem următoarele:

Această proprietate a venit odată cu apariția CSS3 și a primit de fapt o utilizare destul de largă. Implementat folosind parametrul opacitate, care setează transparența imaginii, valori de la 0 la 1, și filtrul al doilea parametru: alpha(Opacity=50); face același lucru numai pentru motor de cautare Explorier deoarece versiunile mai vechi nu suportă parametrul de opacitate, valori de la 0 la 100. În exemplu, am făcut special două imagini pentru ca diferența să se vadă clar.

Aceasta se încheie lecția „CSS Image Properties”. Sper că această lecție v-a fost utilă și v-a inspirat să studiați în continuare limba și să obțineți noi cunoștințe.

Data publicării: 2014-04-22

Fotografia va fi redimensionată la dimensiunea specificată în centimetri (milimetri, inci), precum și dimensiunea DPI specificată, conform standardelor de imprimare pe hârtie. Dimensiunile în cm, mm și inci pot fi specificate cu o precizie de miimi, de exemplu, în loc de formatul 15x10, puteți seta 15,201x10,203 cm.

Tabel cu dimensiuni standard pentru fotografii în poziție verticală (portret):

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

Dacă trebuie să redimensionați o fotografie fără a ține cont de DPI (dots per inch), adică respectând doar proporțiile formatului specificat, atunci pentru a face acest lucru trebuie să setați parametrul „Dimensiune în DPI” la „0” în setările.

Imaginea originală nu este modificată în niciun fel. Vi se va furniza o altă imagine procesată.

Pentru a modifica dimensiunea unei imagini folosind eticheta HTML Sunt furnizate atributele lățime (lățime) și înălțime (înălțime). Pixelii sunt folosiți ca valoare, iar argumentele trebuie să se potrivească cu dimensiunile fizice ale imaginii. De exemplu, în Fig. Figura 10.6 prezintă o imagine care are dimensiuni de 100x111 pixeli.

Orez. 10.6. Poza la dimensiunea originala

În consecință, codul HTML pentru plasarea acestei imagini este dat în exemplul 10.4.

Exemplul 10.4. Dimensiunile desenului

Dacă dimensiunile imaginii sunt specificate în mod explicit, browserul le folosește pentru a afișa zona goală corespunzătoare imaginii în timpul procesului de încărcare a documentului (Fig. 10.7). În caz contrar, browserul așteaptă ca imaginea să se încarce complet, după care modifică lățimea și înălțimea imaginii (Fig. 10.8). În acest caz, textul poate fi reformatat, deoarece dimensiunea originală a imaginii nu este cunoscută și este setată automat la mică.

Orez. 10.7. Dimensiunile imaginii nu sunt indicate și nu s-a încărcat încă

Orez. 10.8. Imaginea a fost încărcată, textul a fost reformatat

Lățimea și înălțimea imaginii pot fi modificate fie mai mici, fie mai mari. Cu toate acestea, acest lucru nu afectează în niciun fel viteza de încărcare a imaginii, deoarece dimensiunea fișierului rămâne neschimbată. Prin urmare, micșorați cu precauție deoarece... Acest lucru poate provoca confuzie în rândul cititorilor cu privire la motivul pentru care o imagine atât de mică durează atât de mult să se încarce. Dar creșterea dimensiunii duce la efectul opus - dimensiunea imaginii este mare, dar fișierul se încarcă mai repede față de o imagine de aceeași dimensiune.

În fig. 10.9 prezintă aceeași imagine ca cea din Fig. 10.6, dar cu lățimea și înălțimea de două ori mai mari.

Orez. 10.9. Vedere a imaginii mărită în browser

Codul pentru un astfel de desen va rămâne practic neschimbat și este prezentat în Exemplul 10.5.

Exemplul 10.5. Schimbarea dimensiunii unei imagini

Această redimensionare se numește reeșantionare, iar algoritmul browserului este inferior în capabilitățile sale editori grafici. Prin urmare, este necesar să măriți imaginile în acest fel numai în cazuri speciale, altfel calitatea imaginii se deteriorează prea mult. Este mai bine să folosiți un fel de program de grafică. Excepția este pentru desenele care conțin zone dreptunghiulare. În fig. 10.10 arată un fișier model care are 54 de octeți și are Dimensiunea originală 8 pe 8 pixeli, scalat până la 150 pixeli.

Orez. 10.10. Imagine mărită

Browserele folosesc doi algoritmi pentru reeșantionare - bicubic (oferă margini netede și o gamă tonală netedă de culori) și cele mai apropiate puncte (păstrează setul original de culori și margini ascuțite). Ultimele versiuni browserele folosesc un algoritm bicubic, iar browserele mai vechi, dimpotrivă, folosesc un algoritm bazat pe cele mai apropiate puncte.