Egyperces: CSS - object-fit
Elég sokat gondolkodtam rajta, hogy mikor mondjuk csinálok egy képgalériát, vagy csak simán egy webshop termék oldalát, meg tudom-e oldani valahogy, hogy a programnak ne kelljen 1000 különböző képet létrehoznia.
Volt egy oldal, ahol a grafikai tervek miatt 16 különböző méretarányú képet kellett használni. Tehát írtam egy php scriptet, ami mindig legenerálja - ha nem létezik - a megfelelő méretű képet. Ezzel eddig nincs is gond, mert a képek a méretezés miatt csak néhány KB helyet foglalnak, de azért sok kicsi sokra megy.
Most találtam rá nemrég a CSS egyik szolgáltatására az object-fitre.
object-fit
Az Internet Explorer tulajdonosok most csukják be a szemüket és csak képzeljék el, hogyan nézhet ki a lenti példa.
A példákban egy 400×250es képpel fogunk dolgozni. A szürke keret mindig az aktuális kép körvonala.
object-fit: contain;
Képméret: 300×300, object-fit: contain
A contain lényege, hogy a képet mindig a megadott méretbe igazítja, ha a kép bármelyik oldala rövidebb, akkor középre igazítja.
object-fit: fill;
| Képméret: **300×300**, object-fit: **fill** | Képméret: **300×300**, nincs object-fit. |
| |
Ez képen annyira nem jó, mert ez nagyjából ugyanaz, mint mikor kényszerítjük a képet egy teljesen más méretarányba.
A dokumentáció szerint a legjobb felhasználási módja egy rossz képarányú video objektum beágyazása esetén látható. Tegyük fel van egy 300×100as videónk, ami konvertáláskor valami miatt elcsúszott, de mi 300×200asban akartuk feltenni, nah ekkor jó a fill.
object-fit: cover;
Képméret: 300×300, object-fit: cover
Nah ez az, amit szeretni fogok. Teljesen kitölti a képet, a túllógó részeket levágja.
object-fit: none;
Képméret: 200×200, object-fit: none, hover: 100%×350
Itt egy nagyobb képet használtam, hogy ne pixelesedjen a nagyításkor és van egy object-position: 25% 90%; is a képen, hogy az animáció jól nézzen ki.
object-fit: scale-down;
Képméret: 300×300, object-fit: scale-down
Ez pedig a none és a contain közötti különbségre alapozva keresi meg a legjobb kitöltést. Jelenleg teljesen ugyanaz az eredménye, mint a containnek.