L

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.

Kicsit bővebb dokumentáció

Összes Egyperces bejegyzés

Leoamros

X

Üdv! Ha még személyesen nem ismerjük egymást, Smajda László vagyok, de szólíts csak egyszerűen Laccának vagy Leoamrosnak. Olyan netbúvároknak osztom az észt, akik szárnyaikat próbálgatják a PHP, MySQL, JavaScript világában, és elakadnak valamelyik folyamat során. Főleg a saját tapasztalatokat írom le, ettől függetlenül kérdezhetsz bátran, lehetőségeimhez mérten válaszolok.

Kategóriák
Címkék
Social Media
Eszközök