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

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»:

Mielőtt válaszolna a kérdésre" hogyan lehet képet beszúrni HTML-be?", meg kell jegyezni, hogy nem érdemes túlterhelni a weboldalakat hatalmas mennyiségű grafikai anyaggal, mivel ez nemcsak az erőforrás vizuális észlelését javítja a felhasználó által, hanem növeli az oldal betöltési idejét is.

Leggyakrabban weboldalak készítésekor használják grafikus formátumok PNG, GIF és JPEG, valamint a képekkel végzett tervezési munkákhoz - grafikus szerkesztő Adobe Photoshop, amely gazdag képességekkel rendelkezik a képek minőségromlás nélküli tömörítésére és átméretezésére, ami hihetetlenül fontos a webfejlesztés szempontjából.

Hogyan lehet képet beszúrni HTML-be?

Ha képet szeretne beszúrni egy HTML-oldalba, használjon egyetlen egyszerű címkét:

,

ahol xxx a kép címe. Ha a kép ugyanabban a könyvtárban van, mint az oldal, a címke így fog kinézni:

Azonban a nagy sebességű és stabil internet még nem érte el a világ minden sarkát, és előfordul, hogy a weboldalon lévő kép egyszerűen nem töltődik be. Ilyen esetekben létezik az alternatív szöveg fogalma.

A kép helyén jelenik meg, ha nem elérhető, betöltődik, vagy a böngésző „kép nélküli” üzemmódjában van. Hozzáadása az alt tag attribútum használatával történik .

Példa alternatív szöveg hozzáadására egy grafikus fájlhoz:

Képméretek hozzárendelése HTML-ben

Egy grafikus fájl megjelenítési méretének megváltoztatásához használja a magasság és szélesség címkéket, ahol a magasság a magasság, a szélesség pedig a szélesség pixelben mérve.

Ezen attribútumok használatakor a böngésző először helyet foglal a grafikus tartalom számára, elkészíti az oldal általános elrendezését, megjeleníti a szöveget, majd betölti magát a képet.

A kép egy meghatározott méretű téglalapba kerül, és ha a paraméterek kisebbek vagy nagyobbak az eredetinél, akkor a képet megnyújtják vagy összenyomják.

Ha a magasság és szélesség attribútumokat nem használja, a böngésző azonnal betölti a képet, késlelteti a szöveg és az egyéb oldalelemek megjelenítését.

Ezeket a paramétereket pixelben (a kép mérete állandó és nem függ a felhasználó képernyőfelbontásától) és százalékban is megadhatjuk (a kép mérete a képernyő felbontásától függ).

Például:

Emlékeztetni kell arra, hogy abban a pillanatban, amikor megváltozol eredeti méret kép, meg kell tartani az arányait.

Ehhez elegendő csak az egyik paraméter értékét megadni ( szélessége vagy magassága), és a böngésző automatikusan kiszámítja a második értékét.

A kép helye HTML-ben

Mint sok HTML-címke esetében, Alkalmazza az igazítás attribútumot, amely igazítja a képet:

- a kép a szöveg felett található;

- a kép a szöveg alatt található;

- a kép a szövegtől balra található;

- a kép a szövegtől jobbra található.

Kép link

Ez a következőképpen történik:

Amint látod, grafikus betét lehet hivatkozás, és rákattintva átirányíthat bármely teljes vagy rövidített formában írt címre.

Hogyan készíthetek egy képet háttérként HTML-ben?

A kép nemcsak látható objektumként illeszthető be az oldalra, hanem a háttérbe is kerülhet. Egy kép háttérként való meghatározásához meg kell adnia a background=”xxx” attribútumot a címkében, ahol az xxx a kép címe, a fenti példákban leírtakhoz hasonlóan.

Állítsuk be például a következő textúraképet háttérképként:

Mentse el a képet egy előkészített oldallal rendelkező mappába, és írja be a következő sorokat:

háttér szöveggel.

Az oldal háttérképe be van állítva.

A képek szinte minden weboldal alkotóelemei, ezért az átméretezés nélkülözhetetlen. A képméretet kétféleképpen módosíthatja: grafikus szerkesztő vagy programozottan be html kódot css-en.

Ha be css kódot Ha nem html-ben állítja be a kép méretét, akkor a webhelyen lévő magassága és szélessége pixelben megegyezik a forrásfájléval. Vagyis a képméretet css és html nélkül, csak grafikus szerkesztővel tudod megváltoztatni, és az automatikusan megváltozik az oldalon, ha nem adod meg a méretét. De vannak esetek, amikor szükség van egy css-ben lévő kép méretének programozására html-re.

1. A kép megváltoztatása grafikus szerkesztőben

Bármilyen grafikus szerkesztőben (Photoshop, Gimp, xnview) átméretezheti a képet, és az automatikusan az eredeti méreteknek megfelelően változik az oldalon.

A módszer előnyei:

A kép gyorsabban töltődik be, mert nincs szükség extra adatok (pixelek) letöltésére, amelyek ezután programozottan tömörítésre kerülnek.

A grafikus szerkesztők nem tömörítik rosszul a 200 pixelnél kisebb szélességű és magasságú képeket.

Amikor csak lehetséges és célszerű, próbálja meg grafikus szerkesztőben megváltoztatni a méretet, hogy a képek gyorsabban töltődjenek be, mint programozott átméretezéskor. A sebességkülönbség akár tízszeres is lehet.

2. A kép módosítása a webhely css kódjában

Előnyök:

Gyorsabb és kényelmesebb a méret beállítása. Ez a módszer A képcsökkentést általában a kényelem érdekében használják. Például, ha egy képnek többféle mérete lehet, gyakran kényelmesebb ugyanannak az értéknek a programozott módosítása, mint egy kép összes formátumbeállításának feltöltése, grafikus szerkesztőben szerkesztve.

A 200 pixelnél kisebb magasságú vagy szélességű képeket a grafikus szerkesztőkkel ellentétben a rendszer hatékonyan tömöríti. Ha azt szeretné, hogy az oldalon a képméret 200 pixelnél kisebb legyen, akkor jobb, ha az eredeti mérete 30-50%-kal nagyobb (260-300 pixel), hogy kicsinyítéskor is megőrizze a jó minőséget.

Ugyanakkor a webhely betöltési sebességének különbsége nem lesz érezhető, mivel a kis képek nagyon kevés helyet foglalnak el, és ha 30%-kal növeli a méretüket, akkor nem fog változást észlelni. De észre fogod venni a minőségi különbséget.

A szoftverrel tömörített képek betöltése tovább tart, mert az átméretezés csak az eredeti verzió letöltése után történik meg. Ezért, ha a kép mérete több mint 200 pixel szélességben vagy magasságban, akkor jobb, ha tömöríti egy grafikus szerkesztőben, hogy a webhely gyorsabban működjön.

Hogyan változtassuk meg a képméretet html-ben css segítségével

A HTML-ben lévő kép méretének CSS használatával történő megváltoztatásához tulajdonságokat használnak szélesség (szélesség) és magasság (magasság) belül stílus attribútum. Csak szélesség vagy magasság írható be, és a fennmaradó, nem megadott érték automatikusan megváltozik a kép arányainak megőrzése érdekében. Például, ha csak a kép szélességét adja meg a szélesség használatával, a magassága automatikusan megváltozik, megtartva az arányokat. És fordítva, ha csak a magasságot adja meg, a szélessége is automatikusan megváltozik, megtartva a kép arányait.

Példakód a kép méretének megadása nélkül

Eredmény a böngészőben

Oldal kódja

Példakód egy kép átméretezésére .css fájlban

Eredmény a böngészőben

Oldal kódja

style="width:150px; " >

Mindkét fenti példa ugyanazt a képet használja, 300x184 képpont méretű (szélesség és magasság). Az 1. példában a kép változatlanul, az eredeti 300x184 képpont méretben jelent meg a böngészőben, mert a css-ben nem volt megadva a szélesség és a magasság. A 2. példában pedig a kép kétszeresére csökkentve jelent meg a böngészőben, mert a szélesség 150px volt, a magasság pedig automatikusan 92 px-re változott. Mint látható, a height tulajdonságot egyáltalán nem kell megadni, mert automatikusan a szélesség arányában változik.

Ha mindkét paramétert megadja: szélesség (szélesség), magasság (magasság)és nem fognak megfelelni az arányoknak, akkor pont ekkora lesz a kép, de az értékektől függően összenyomva vagy nyújtva.

Miért nem célszerű a képeket nagyítani

Fontos: A kép méretének növelése minőségromlással jár. Bármilyen változtatásnál fontos, hogy az értékeket kisebbre állítsuk, mint az eredeti képen, vagyis csak csökkentsük.

Ha az eredeti képnél nagyobb pixelméretet állít be, a minőség romlik. A minőségromlás pedig jól látható lesz, ugyanis a számítógép nem tud új pixeleket hozzáadni, csak a meglévők méretét tudja növelni. Minél nagyobb a kép nagyítása az eredeti értékhez képest, annál rosszabb a minősége, és annál jobban láthatóak a négyzetes pixelek.

Utasítás

Először próbálja meg megtalálni a képet a keresőmotorok segítségével. Írja be a lekérdezést, majd válassza ki a keresési beállítások lapot. A Google számára például ez a „Keresőeszközök” gomb, a Yandex esetében pedig egy csúszkákkal ellátott ikon. Ezután ki kell választania a „Méret” lehetőséget, és meg kell adnia a pontos értékeket. Vagy például, ha jó felbontású fényképre van szüksége, válassza a „Nagy” lehetőséget.

Ha nincs megfelelő méretű kép, akkor saját kezűleg illesztheti a keretre. Vannak módok. Az első az, hogy először létrehoz egy dokumentumot a kívánt mérettel, majd módosítja a képet. A második az ellenkezője - nyissa meg a képet, és változtassa meg a méretet. Lényegében nincs különbség: minden az Ön preferenciáitól és céljaitól függ. A példák az Adobe Photoshopban jelennek meg, de használhat más grafikus szerkesztőket is.

Első út. Kattintson a "Fájl" - "Új..." vagy a Ctrl+N billentyűkombinációra. Megjelenik előtted egy ablak a beállításokkal. Itt adja meg a szélességet, magasságot és a szükséges színfelbontás paramétereket. Ezután nyissa meg a kívánt képet a böngészőben, kattintson a jobb gombbal, és válassza a „Kép másolása” lehetőséget. Ezután térjen vissza a programhoz, és nyomja meg a Ctrl+V billentyűkombinációt.

A kép megjelenik a grafikus szerkesztő ablakában. Ezután kattintson a „Szerkesztés” - „Szabad átalakítás” vagy a Ctrl + T kombinációra. Megjelennek a kulcspontok, amelyekkel a képet a munkaablak méretéhez igazíthatja. Amint megkapja a kívánt eredményt (mellesleg túlléphet a munkaterület határain), kattintson a „Fájl” - „Mentés másként...” vagy a Ctrl + S billentyűkombinációra.

Második út. Először el kell mennie a számítógépére, majd kattintson a „Fájl” - „Megnyitás ...” (vagy a Ctrl + O kombináció) elemre, és válassza ki a kívánt képet. Ezután válassza az „Image” - „Image size...” lehetőséget, vagy nyomja meg az Alt+Ctrl+I kombinációt. Törölje az „Arányok megtartása” jelölőnégyzetet, és adja meg a kívánt méretet. Ezután nyomja meg az OK gombot.