Egy termékfotó a saját fájljában hibátlan, a webes kártyán mégis eltűnik róla a termék felső része. Ennek oka lehet az eltérő képarány és a keretet teljesen kitöltő megjelenítés. A kép megfelelő mérete ezért a vágás módjával együtt értelmezhető.
Az alábbi saját példában a forráskép 4000 × 3000 pixeles, a megjelenítési keret 1200 × 628 méretű. A számítás megtartja az eredeti képarányt. Először középre igazított vágást, majd a teljes képet megőrző beillesztést vizsgálunk.
A cover a teljes keretet kitölti
A keret szélességéhez szükséges arány 1200/4000 = 0,3. A magassághoz szükséges arány 628/3000 ≈ 0,20933. Teljes kitöltéshez a nagyobb arányt választjuk: 0,3.
A kép így 1200 × 900 méretben jelenik meg a 1200 × 628-as keret mögött. Magasságban 272 pixelnyi megjelenítési méret lóg ki. Középre igazításnál ebből 136 kerül felülre és ugyanennyi alulra.
A W3C CSS Images szabványa külön definiálja a cover és contain illesztést. A konkrét vágási mennyiségeket itt saját méretekből számoljuk, és középre igazítást feltételezünk.
Fordítsd vissza a vágást a forrásképre
A megjelenítési 136 egység a 0,3-as aránnyal visszaosztva 453,33 forráspixelnek felel meg. A forráskép tetejéből és aljából tehát körülbelül ennyi marad a kereten kívül. A látható forrásmagasság 628/0,3 ≈ 2093,33 pixel.
Ez azt jelenti, hogy a 3000 pixeles magasságból összesen körülbelül 906,67 pixel, azaz 30,22% nem látszik. Ha a fontos felirat vagy a termék széle ebbe a sávba esik, a nagy felbontás ellenére is lemarad.
A pozicionálás megváltoztatásával a vágás áttehető egyik oldalra. A teljes kivágott magasság ettől változatlan marad, csak más képrészlet esik ki. A termék lényeges részleteinek kijelölése ezért külön szerkesztési döntés.
A contain a teljes képet megtartja
Teljes beillesztésnél a kisebb, 628/3000 arányt választjuk. A kép magassága pontosan 628, szélessége pedig 4000 × 628/3000 ≈ 837,33 lesz.
A keretben így 362,67 szélességi egység marad üresen. Középre igazítva ez körülbelül 181,33 mindkét oldalon. A teljes termék látszik, de a keret széleit a választott háttér tölti ki.
A két eredmény közül a feladat alapján dönts. Egy pontos termékbemutatónál a teljes tárgy megőrzése lehet fontosabb, egy dekoratív hangulatképnél a vágás elfogadható lehet. A képarány torzító nyújtását ettől külön kell kezelni.
Mobilon új keret új számítást jelent
Ha egy keskeny képernyőn a kártya négyzetessé válik, a forráskép más arányban lóg ki. A korábbi 1200 × 628-as kivágást nem lehet automatikusan mobilos biztonságos területnek tekinteni. A ténylegesen használt keretet kell ellenőrizni minden fontos elrendezésnél.
A képarány-kalkulátor a méretek arányos átszámításában segít. A képfájlméret-kalkulátor más kérdést vizsgál: az adatmennyiséget és az adott feltételek szerinti méretet. A kisebb fájlméret önmagában nem javítja meg a rossz kivágást.
A fenti méretek elméleti illesztési értékek. A böngésző tört megjelenítési koordinátákkal is dolgozhat, a raszterezés és az eszköz pixelsűrűsége további részlet. Végül a tényleges képet is nézd meg a célkeretben, a fontos feliratok és tárgyszélek ellenőrzésével.
Számold ki a négyzetes mobilos változatot is
Ugyanazt a 4000 × 3000 pixeles forrást most 320 × 320-as keretbe tesszük. Cover esetén a nagyobb méretarány 320/3000 ≈ 0,10667. A megjelenített kép így körülbelül 426,67 × 320, tehát vízszintesen összesen 106,67, középre igazítva oldalanként 53,33 megjelenítési egység marad a kereten kívül.
A forrásképre visszaosztva ez oldalanként 500 pixel, összesen 1000 pixel kivágás. A 4000 pixeles szélességből 3000 látszik, vagyis 25% vész el vízszintesen. Az asztali változat felül és alul vágott; ez a négyzetes mobilkeret balra és jobbra vág. Ugyanaz a középre igazítás így különböző részleteket veszélyeztet.
Ha mindkét középre igazított változatban látható területet keresed, a forrás vízszintes tartománya 500–3500 pixel, függőlegesen pedig körülbelül 453,33–2546,67 pixel. Ez 3000 × 2093,33, azaz mintegy 6,28 millió forráspixel, az eredeti terület 52,33%-a. Ez kizárólag a két most megadott keret közös látható része; más elrendezésre újra kell számolni.
Egy termék 3400 pixel széles részletét a négyzetes cover legfeljebb 3000 pixeles látható szélességébe pozicionálással sem tudod teljesen betenni. Ilyenkor a teljes tárgyhoz contain illesztés vagy másképp szerkesztett kép szükséges. A CSS Images szabvány külön kezeli a méretarányt megtartó illesztést és az objektum pozicionálását; a kivágás helyének mozgatása nem növeli a látható forrásterület méretét.
Gyakori kérdések
A cover módosítja az eredeti képfájlt?
A CSS-megjelenítés önmagában nem írja át az eredeti fájlt. A kereten kívüli rész egyszerűen nem látszik az adott elrendezésben.
A contain biztosan üres sávokat hagy?
Eltérő képaránynál igen. Azonos arányú forrás és keret esetén vágás és üres sáv nélkül is illeszthető a kép.
A nagyobb felbontás megszünteti a levágást?
Nem. A vágást a képarány, a kitöltési mód és a pozicionálás határozza meg. Több pixel ugyanazzal az aránnyal ugyanazt a képrészletet hagyhatja kívül.
Záró tudáspróba
Válassz kérdésenként egy választ. A megoldások ellenőrzése után minden helyes válaszért 1 pontot adj magadnak; a hibás, kihagyott vagy több válasszal megjelölt kérdés 0 pont. Összesen 0–3 pont szerezhető.
1. A 4000 × 3000 kép 320 × 320-as cover megjelenítésénél melyik irányban történik kivágás?
- A) Csak felül és alul.
- B) Balra és jobbra, összesen 1000 forráspixel szélességben.
- C) Nincs kivágás, mert a keret négyzetes.
2. Miért nem elég az asztali kivágásból mobilos biztonságos területet kijelölni?
- A) Mert a mobil mindig elforgatja a fájlt.
- B) Mert a pixelsűrűség szükségképpen módosítja a kép tartalmát.
- C) Mert az eltérő keretarány a vágás irányát és méretét is megváltoztathatja.
3. A fontos tárgyrész 3400 forráspixel széles, a mobilos cover 3000-et mutat. Elég az object-position mozgatása a teljes részlethez?
- A) Nem; más illesztés vagy új képszerkesztés kell a teljes szélességhez.
- B) Igen, a pozicionálás megváltoztatja a képarányt.
- C) Igen, ha az eredeti fájlt ugyanazzal az aránnyal nagyobb felbontásra cseréled.
Megoldások és pontszám
1. B. A magasság 320-ra illesztésekor a szélesség 426,67 lesz. A keretbe 3000 forráspixel fér a 4000-ből, középre igazítva 500–500 marad kívül.
2. C. Az asztali 1200 × 628-as keret függőlegesen, a négyzetes keret vízszintesen vág ebből a forrásból. Mindkettőt ellenőrizni kell.
3. A. A pozicionálás a látható sáv helyét mozdítja. A sáv szélessége továbbra is 3000 forráspixel, így a 3400 pixeles részlet teljesen nem fér bele.
3 pont: A két keret látható területét és a pozicionálás határát is kezelted. A saját termékfotón a fontos részleteket mindkét kivágásban ellenőrizd.
2 pont: Az 1. kérdéshez a 320-as négyzet számítását, a 2.-hoz a két kivágási irányt, a 3.-hoz a 3400 pixeles tárgyrész példáját nézd át.
0–1 pont: Először a szélességi és magassági arány közül válaszd ki a coverhez szükséges nagyobbat. Számold vissza a keretet forráspixelre, és ebben jelöld ki a fontos tárgyrészt.