Hogyan állítsuk be a képméretet html-ben. Fénykép átméretezése centiméterben papírra történő nyomtatáshoz, figyelembe véve az online DPI-t. Hogyan lehet képet beszúrni HTML-be

Nem tudja, hogyan növelje meg a kép méretét? Ez egy nagyon egyszerű feladat, mivel minden, amire szüksége van, már telepítve van a számítógépén. Olvassa el ezt az oktatóanyagot, és megtudhatja, hogyan kell átméretezni egy fényképet 5 egyszerű eszközzel.

1. módszer: Kép átméretezése a Microsoft Paintben

1. Keresse meg és indítsa el az MS Paint programot. Minden verzióra előre telepítve érkezik operációs rendszer Ablakok. Start> Minden program> Kellékek> Paint:

1. Húzza a képet a Paint ablakba, vagy használja Menü > Megnyitás (Ctrl + O).
2. A program főmenüjében keresse meg az „Átméretezés” elemet, és válassza ki:

1. Megnyílik a képméretek és -arányok módosítására szolgáló panel. Az értéket pixelben adhatja meg. Ne felejtse el ellenőrizni a " Tartsa be az arányokat" Ellenkező esetben a kép deformálódni fog:

1. A kép méretének növeléséhez kattintson az "OK" gombra, és mentse el a fényképet.

Tanács:

• Ha nem tudja méretezni a fényképet a nyújtás nélkül, a Vágás eszközzel eltávolíthatja a nem kívánt éleket. Ennek módját a 3. bekezdés írja le;
• A fénykép gyorsabb megnyitásához kattintson rá a jobb gombbal, és válasszon az egyik közül helyi menü bekezdés " Nyissa meg Painttel»;
• A legjobb, ha a képet az eredetivel azonos formátumban menti.

2. módszer: Kép átméretezése az MS Photo Galleryben

1. Ha a Microsoft Photo Gallery nincs telepítve a számítógépére ( Start > Fotógaléria), le kell töltenie és telepítenie kell a Windows Essentials 2012 részeként;
2. Indítsa el az MS Photo Gallery alkalmazást, és keresse meg grafikus fájlját;
3. Kattintson rá jobb gombbal, és válassza az „Átméretezés...” lehetőséget:

1. Válasszon ki egy kész előbeállítást: " Kicsi 640 pixeles", "Közepes 1024", "Nagy 1280" stb.

1. kattintson a " Átméretezés és mentés" A kép méretének növelése után a kép ugyanabba a mappába kerül, és az eredeti is abban marad.

Tanács:

• Ha be kell állítania a pontos képméretet, válassza a " Egyedi", és állítsa be a méretet a fénykép nagyobbik oldalára;
• Több fénykép egyidejű átméretezéséhez jelölje ki őket, miközben lenyomva tartja a Ctrl billentyűt.

3. módszer: Kép átméretezése a Photoscape alkalmazásban

A kép méretét növelheti a Photoshopban. Vagy használd ehhez a Photoscape-et.

1. Töltse le a Photoscape-et és telepítse. Indítsa el a programot;
2. Lépjen a "Szerkesztő" fülre, és keresse meg a szerkeszteni kívánt fényképet:

1. A kép alján van egy "Átméretezés" gomb, kattintson rá.
2. Állítson be új fényképméretet. Győződjön meg arról, hogy a " Tartsa meg a képarányt" engedélyezve van, és nyomja meg az "OK" gombot:

1. Mentse el a szerkesztett képet.

Tanács:

• Ha több képet kell átméreteznie, használja a " Kötegelt szerkesztő" Adjon hozzá egy mappát, és méretezze át a benne lévő összes fényképet;
• Ha nem ismeri a pontos méretet, beállíthatja az eredeti méret "százalékát".

4. módszer: Kép átméretezése az IrfanView-ban

1. Telepítse az IrfanView-t - egy nagyszerű eszköz a képek megtekintéséhez és nagyításához;
2. Fénykép hozzáadásához húzza a program ablakába, vagy kattintson az eszköztár első gombjára:

1. Lépjen a "Kép" fülre, válassza a " Módosítsa a méretet/arányokat» ( Ctrl+R);
2. Állítsa be az új méretet pixelben, centiméterben, hüvelykben vagy az eredeti kép százalékában:

1. Mentse el a képet.

Tanács:

• Használhat szabványos méreteket: 640 x 480 pixel, 800 x 600 pixel, 1024 x 768 képpont stb.;
• Menteni jó minőség fényképeket, győződjön meg arról, hogy a DPI legalább 300-ra van állítva.

5. módszer: Kép átméretezése online

1. Egy kép online átméretezéséhez lépjen a PicResize oldalra.
2. Kattintson a gombra Tallózás" fénykép kiválasztásához. kattintson a " Folytatni»:

1. Válassza ki az eredeti kép százalékát, például 50%-kal kisebbet. Az eszköz megjeleníti a kimeneti kép méretét. Alternatív megoldásként megadhatja a pontos méretet a " Egyedi méret»:

Ez a lecke egyfajta folytatása az előzőnek, amelyben megnéztük, most itt az ideje, hogy elmélyítse tudását és nézze meg CSS tulajdonságok Képek.

Képméretek CSS-ben

Találjuk ki, mi az újdonság itt, létrehoztam egy img osztályt, amiben megadtam a kép méreteit, a szélesség a szélesség, a magasság pedig a magasság, az eredetinél nagyobb méreteket adtam meg, hogy jól látható legyen, hogyan a kép megváltozik.

Az érthetőség kedvéért mondok egy példát, ahol sok lesz a szöveg, és látni fogja, milyen behúzások vannak a képen ebben a példában Használjuk a margin tulajdonságot, amely lehetőséget ad annak képességeinek értékelésére.

Az érthetőség kedvéért mondok egy példát, ahol sok lesz a szöveg, és látni fogod, hogy milyen behúzások vannak a képen.. Ebben a példában egy képet fogunk használni behúzások megadása nélkül, hogy jól látható legyen a különbség.

A böngészőben a következőket látjuk:

Ebben a példában a képből készítettem a behúzásokat a margó paraméternek köszönhetően, amely 20 pixeles behúzást adott mind a négy élből. Itt egy bonyolultabb manipulációt is elvégezhet, beállíthatja az eltolást egy adott éltől, például:

• margin-top – margó a felső oldalról
• margin-right – margó a jobb oldalról
• margin-bottom – margó alulról
• margin-left – margó bal oldalról

Ennek megfelelően itt mindent finomabban állíthat be, vagy csak egy vagy két oldalról állíthatja be a behúzást anélkül, hogy a többihez hozzáérne.

A böngészőben:

A kép köré keretet állítunk be, a border paraméternek köszönhetően először a keret szélességét a border-width segítségével állítjuk be, pixelben, majd a keret stílusát, vagyis a megjelenését szegély stílusban, itt több érték közül választhat:

Az utolsó paraméter, amelyet módosítani fogunk, a keret színe, amelyet a border-color paraméter állít be.

A böngészőben ezt látjuk:

Mint érti, a body tag-hez hátteret rendeltünk a címkeválasztónak köszönhetően, mivel az a teljes dokumentumot lefoglalja, így más címkékhez is hozzárendelhetjük. A háttér paraméter egy hátteret adott nekünk a cím képével, amelyre zárójelben írunk. A hátteret is módosíthatja, például:

háttér: url(proba.png) repeat-x;

A háttér csak az X tengely mentén, azaz vízszintesen, egy sorban ismétlődik.

háttér: url(proba.png) repeat-y;

A háttér csak az Y tengely mentén ismétlődik, azaz függőlegesen egy sorban.

háttér: url(proba.png) no-repeat;

A háttér nem ismétlődik, és csak egy kép jelenik meg.

háttérméret: 500 képpont 200 képpont;

Ez további paraméter, amely meghatározza a háttér képméretét, szélességét és magasságát.

Kép átlátszóvá tétele CSS használatával

A böngészőben a következőket látjuk:

Ez a tulajdonság a CSS3 megjelenésével jött, és valójában meglehetősen széles körben használtak. Az opacitás paraméterrel valósítjuk meg, amely beállítja a kép átlátszóságát, 0 és 1 közötti értékeket, és a második paraméterszűrőt: alpha(Opacity=50); csak azért csinálja ugyanezt internet böngésző Explorier, mivel a régebbi verziók nem támogatják az átlátszatlanság paramétert, 0 és 100 közötti értékeket. A példában speciálisan két képet készítettem, hogy jól látható legyen a különbség.

Ezzel a „CSS-kép tulajdonságai” leckét zárom. Remélem, hogy ez a lecke hasznos volt az Ön számára, és inspirált a nyelv további tanulmányozására és új ismeretek megszerzésére.

Megjelenés dátuma: 2014-04-22

A fotó átméretezésre kerül a megadott méretre centiméterben (milliméterben, hüvelykben), valamint a megadott DPI méretre, a papírnyomtatási szabványoknak megfelelően. A méretek cm-ben, mm-ben és hüvelykben ezred pontossággal adhatók meg, például a 15x10-es formátum helyett 15,201x10,203 cm-t állíthatunk be.

Táblázat szabványos fotóméretekkel függőleges (álló) helyzetben:

Szabványos papírméret A4-es méret- 21x29,7 cm vagy 2480x3508 pixel 300 dpi-vel. Más lapformátumok méretei a Wikipédia oldalán láthatók, de ne feledjük, hogy ott a méretek milliméterben és hüvelykben vannak feltüntetve, pl. Ezen az oldalon a beállításokban ki kell választani a megfelelő értéket.

Ha a DPI (dots per inch) figyelembevétele nélkül kell átméreteznie egy fényképet, azaz csak a megadott formátum arányait kell figyelembe vennie, akkor ehhez a „Size in DPI” paramétert „0”-ra kell állítania. a beállításokat.

Az eredeti kép semmilyen módon nem változott. Egy másik feldolgozott képet kap.

Egy kép méretének módosítása a HTML tag használatával A szélesség (szélesség) és magasság (height) attribútumok rendelkezésre állnak. Értékként pixeleket használunk, és az argumentumoknak meg kell egyeznie a kép fizikai méreteivel. Például az ábrán. A 10.6. ábra egy 100x111 pixel méretű képet mutat.

Rizs. 10.6. Eredeti méretű kép

Ennek megfelelően a kép elhelyezéséhez szükséges HTML kód a 10.4. példában található.

10.4. példa. Rajz méretei

Ha a képméretek kifejezetten meg vannak adva, akkor a böngésző ezek alapján jeleníti meg a képnek megfelelő üres területet a dokumentumbetöltési folyamat során (10.7. ábra). Ellenkező esetben a böngésző megvárja a kép teljes betöltődését, majd megváltoztatja a kép szélességét és magasságát (10.8. ábra). Ebben az esetben a szöveg újraformázható, mivel a kép eredeti mérete nem ismert, és automatikusan kicsire lesz állítva.

Rizs. 10.7. A kép méretei nincsenek feltüntetve, és még nem töltötték be

Rizs. 10.8. Kép feltöltve, szöveg újraformázva

A kép szélessége és magassága változtatható kisebbre vagy nagyobbra. Ez azonban semmilyen módon nem befolyásolja a kép betöltési sebességét, mivel a fájl mérete változatlan marad. Ezért óvatosan kicsinyítsen, mivel... Ez zavart okozhat az olvasókban, hogy miért tart ilyen sokáig egy ilyen kis kép betöltése. A méret növelése azonban az ellenkező hatáshoz vezet - a kép mérete nagy, de a fájl gyorsabban töltődik be, mint egy azonos méretű kép.

ábrán. A 10.9. ábra ugyanazt a képet mutatja, mint az ábra. 10,6, de kétszer nagyobb szélességgel és magassággal.

Rizs. 10.9. A kép nézete kinagyítva a böngészőben

Az ilyen rajz kódja gyakorlatilag változatlan marad, és a 10.5. példában látható.

10.5. példa. Kép méretének megváltoztatása

Ezt az átméretezést újramintavételezésnek nevezik, és a böngésző algoritmusa képességeinél gyengébb. grafikus szerkesztők. Ezért a képeket ilyen módon csak speciális esetekben szükséges nagyítani, különben a kép minősége túlságosan leromlik. Érdemes valami grafikus programot használni. Ez alól kivételt képeznek a téglalap alakú területeket tartalmazó rajzok. ábrán. A 10.10 egy mintafájlt mutat, amely 54 bájtot foglal el, és rendelkezik eredeti méret 8 x 8 pixel, 150 pixelre méretezve.

Rizs. 10.10. Kinagyított kép

A böngészők két algoritmust használnak az újramintavételezéshez: bicubic (sima éleket és egyenletes színtartományt biztosít) és a legközelebbi pontokat (megőrzi az eredeti színkészletet és éles széleket). Legújabb verziók a böngészők bikubikus algoritmust használnak, a régebbi böngészők pedig éppen ellenkezőleg, a legközelebbi pontokon alapuló algoritmust.