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.
Az MDN object-fit leírása 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.
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.