Ez a lecke egyfajta folytatása az előzőnek, amelyben úgy gondoltuk, most itt az ideje, hogy elmélyítse tudását és lásd CSS tulajdonságok Képek.
Képméretek CSS-ben
Lássuk, mi az újdonság itt létrehoztam egy img osztályt, amiben beállítottam a kép méreteit, a szélesség a szélesség, a magasság pedig a mi magasságunk, a méreteket az eredetinél jobban feltüntettem, hogy jól látható legyen a kép meg fog változni.
Az érthetőség kedvéért mondok egy példát, ahol sok szöveg lesz, és látni fogja, hogy a kép milyen behúzásai vannak ezt a példát a margin tulajdonságot fogjuk használni, 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 fogja, hogy ebben a példában milyen behúzások vannak a képen, 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 behúzásokat készítettem a margó paraméternek köszönhetően, amely 20 képpont mind a négy szélétől behúzást állított be. Itt trükkösebb manipulációkat is végezhet, beállíthatja a behúzást egy adott éltől, például:
- margin-top - margó a felső oldalról
- margó-jobb - margó jobb oldalról
- margin-bottom - margó az alsó oldalró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 keretet a kép köré állítjuk 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ése keretes stílust, ott több értéket választhat:
Az utolsó paraméter, amelyet módosítani fogunk, a szegély színe, amelyet a border-color paraméter állít be.
A böngészőben ezt látjuk:
Amint értitek, a body tag-hez a hátteret a címkeválasztónak köszönhetően rendeltük, mivel az a teljes dokumentumot lefoglalja, más címkéket is hozzárendelhetünk. A háttér paraméter a hátteret egy képpé tette számunkra, aminek a címét zárójelbe írjuk. 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 ismétlődik, azaz vízszintesen egy sorban.
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, de csak egy kép jelenik meg.
háttérméret: 500 képpont 200 képpont;
azt további paraméter A, amely beállítja a kép háttér méretét, szélességét és magasságát.
Képátlátszóság CSS-sel
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 megvalósítva beállítja a kép átlátszóságát, 0 és 1 közötti értékeket, és a második szűrőparamétert: alpha(Opacity=50); ugyanezt teszi internet böngésző Explorier, mert a régebbi verziók nem támogatják az opacitás 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éptulajdonságok leckét zárom, remélem, ez a lecke hasznos volt számodra, é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 képek szinte minden webhely alkotóelemei, ezért az átméretezés nélkülözhetetlen. A kép átméretezésének két módja van: grafikus szerkesztő vagy programozottan html kódot css-en.
Ha be css kódot html-en ne állítsa be a kép méretét, akkor a magassága és szélessége az oldalon ugyanaz lesz pixelben, mint a forrás fájl. Vagyis egy képet css és html nélkül, csak grafikus szerkesztővel átméretezhetsz, é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 a grafikus szerkesztőben
A kép méretét bármely grafikus szerkesztőben módosíthatja (Photoshop, gimp, xnview), és az automatikusan az eredeti méretnek megfelelően változik az oldalon.
A módszer előnyei:
A kép gyorsabban töltődik be, mert nem kell extra adatokat (pixeleket) letöltenie, ami ezután programozottan tömörítésre kerül.
Mínuszok:
A grafikus szerkesztők rosszul tömörítik a 200 pixelnél kisebb szélességben és magasságban lévő képeket.
Amikor csak lehetséges és helyénvaló, próbálja meg grafikus szerkesztőben átméretezni, hogy a képek gyorsabban töltődjenek be, mint a programozott átméretezéssel. A sebességkülönbség akár tízszeres is lehet.
2. A kép megváltoztatá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ép több különböző méretű lehet, gyakran kényelmesebb ugyanannak az értéknek a programozott módosítása, mint egy grafikus szerkesztőben szerkesztett kép összes formátumbeállításának feltöltése.
Minőségileg tömörített kis képek, amelyek magassága vagy szélessége kevesebb, mint 200 pixel, ellentétben a grafikus szerkesztőkkel. Ha azt szeretné, hogy a webhely képmérete 200 képpontnál kisebb legyen, jobb, ha az eredeti mérete 30-50%-kal (260-300 képpont) nagyobb a mentéshez. jó minőségű amikor csökken.
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 figyelje meg a minőségi különbséget.
Mínuszok:
A programozottan 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 lehet átméretezni a html képet css segítségével
Kép átméretezése html-ben css tulajdonságait használják szélesség (szélesség) és magasság (magasság) a stílus attribútumon belül. Csak szélesség vagy magasság írható be, és a fennmaradó, nem megadott érték automatikusan megváltozik, miközben a kép képaránya megmarad. Például, ha csak egy kép szélességét adja meg a szélesség használatával, a magassága automatikusan megváltozik, megtartva a képarányt. És fordítva, ha csak a magasságot (magasságot) adjuk meg, a szélessége is automatikusan megváltozik, megőrizve a kép képarányát.
Kódpélda képméretek megadása nélkül
Eredmény a böngészőben
Oldal kódja
Példakód képméretezéssel .css-ben
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). 1 példában a kép változtatás nélkül jelent meg a böngészőben az eredeti 300x184px méretben, mivel 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, mivel a szélessége 150px volt, a magasság ennek megfelelően automatikusan 92 px-re változott. Amint látható, előfordulhat, hogy a height tulajdonságot egyáltalán nem adjuk meg, mivel az automatikusan a szélesség arányában változik.
Ha mindkét lehetőséget megadja: szélesség (szélesség), magasság (magasság)és nem fognak megfelelni az arányoknak, akkor pont akkora lesz a kép, de az értékektől függően összenyomva vagy nyújtva.
Miért nem kívánatos a képek nagyítása?
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 a pixelméretet az eredeti képnél nagyobbra állítja, a minőség romlik. A minőségromlás pedig jól látható lesz, mert a számítógép nem tud új pixeleket hozzáadni, csak a meglévőket 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.
Kép átméretezése HTML címkével szélesség (szélesség) és magasság (height) attribútumok vannak megadva. Értékként pixeleket használunk, és az argumentumoknak meg kell egyeznie a kép fizikai méreteivel. Például a 2. ábrán. A 10.6 egy 100x111 pixel méretű képet mutat.
Rizs. 10.6. eredeti méretű kép
Ennek megfelelően az ábra elhelyezéséhez használt HTML-kód a 10.4-es példában látható.
10.4. példa. Rajz méretei
Ha a kép méretei kifejezetten meg vannak adva, akkor a böngésző ezek alapján jeleníti meg a képnek megfelelő üres területet a dokumentum betöltésekor (10.7. ábra). Ellenkező esetben a böngésző megvárja a kép teljes betöltődését, mielőtt megváltoztatná a kép szélességét és magasságát (10.8. ábra). Ebben az esetben előfordulhat a szöveg újraformázása, mivel kezdetben a kép mérete nem ismert, és automatikusan kicsire lesz állítva.
Rizs. 10.7. A kép mérete nincs megadva, és még nincs betöltve
Rizs. 10.8. Kép feltöltve, szöveg újraformázva
A kép szélessége és magassága felfelé és lefelé is változtatható. Ez azonban semmilyen módon nem befolyásolja a kép letöltési sebességét, mivel a fájl mérete változatlan marad. Ezért óvatosan csökkentse a képet, mert. ez zavart okozhat az olvasókban, miért tart ilyen sokáig egy ilyen kis rajz 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 betöltődik az azonos méretű képhez képest.
ábrán. A 10.9. ábra ugyanazt a képet mutatja, mint az 1. ábrán. 10,6, de szélessége és magassága megduplázódott.
Rizs. 10.9. A kép nézete kinagyítva a böngészőben
Az ilyen rajz kódja szinte változatlan marad, és a 10.5. példában látható.
10.5. példa. Kép átméretezése
Az ilyen átméretezést újramintavételezésnek nevezik, és a böngésző algoritmusa képességeiben gyengébb a grafikus szerkesztőkénél. Ezért csak speciális esetekben szükséges a kép ilyen módon történő növelése, különben a képminőség túlságosan romlik. Érdemesebb valamilyen grafikus programot használni. Kivételt képeznek a téglalap alakú területeket tartalmazó rajzok. ábrán. A 10.10. ábra egy 54 bájt méretű mintafájlt mutat be, amelynek eredeti mérete 8 x 8 pixel, 150 képpontra méretezve.
Rizs. 10.10. Nagyított kép
A böngészők két algoritmust használnak az újramintavételhez: bicubic (sima éleket és sima színtartományt ad) és a legközelebbi pontokat (megőrzi az eredeti színkészletet és éles széleket). A böngészők legújabb verziói bikubikus algoritmust használnak, míg a régebbi böngészők éppen ellenkezőleg, a legközelebbi pont algoritmusát.
Utasítás
Először próbálja meg megtalálni a képet a keresőmotorok segítségével. Írjon be egy lekérdezést, majd válassza ki a keresési beállítások lapot. A Google például rendelkezik egy „Keresési eszközök” gombbal, míg a Yandex egy csúszkákkal ellátott ikonnal rendelkezik. Miután ki kell választania a "Méret" elemet, é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 a kívánt méretű kép, akkor azt saját kezűleg a kerethez igazíthatja. 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ákat az Adobe Photoshop figyelembe veszi, de használhat más grafikus szerkesztőket is.
Első út. Kattintson a "Fájl" - "Létrehozás ..." 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 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, amelyek segítségével a képet a munkaablak méretéhez illesztheti. 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.
A második út. Először el kell mennie a számítógéphez, majd kattintson a "Fájl" - "Megnyitás ..." (vagy a Ctrl + O kombinációra), é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 billentyűket. Törölje a „Képarány megtartása” jelölőnégyzetet, és válassza ki a kívánt méretet. Ezután nyomja meg az OK gombot.
A fotó átméretezése a megadott méret szerint centiméterben (milliméterben, hüvelykben), valamint a megadott méretben DPI-ben történik, 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 (portré) helyzetben:
| A fénykép formátuma centiméterben (cm) | Méret milliméterben (mm) | Méret pixelben (nyomtatáshoz 300 dpi) |
Képarány (fekvő tájolásban) |
| 3x4 (kézi vágás után) | 30x40 | 354x472 | 4:3 (1.33) |
| 3,5x4,5 (kézi vágás után) | 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) |
Szabványos papírlapméret A4-es formátum- 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 felejtsük el, hogy ott a méretek milliméterben és hüvelykben vannak megadva, azaz. 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 a beállításoknál a "Size in DPI" paramétert "0"-ra kell állítania.
Az eredeti kép semmilyen módon nem változott. Egy másik feldolgozott képet kapsz.