CSS object-fit
A CSS <object-fit> tulajdonság lehetővé teszi, hogy szabályozzuk, hogyan illeszkedjen egy kép vagy videó a konténerébe. Ez különösen fontos akkor, ha az elem mérete eltér az eredeti arányoktól.
Az object-fit alapjai
Az <object-fit> beállítja, hogyan férjen bele egy kép a meghatározott szélességű és magasságú dobozba. A leggyakoribb értékek a cover és a contain.
Egyszerű példák
Az alábbi példák bemutatják, hogyan viselkedik ugyanaz a kép különböző object-fit értékekkel.
Cover vs. Contain összehasonlítás
A cover kitölti a konténert a kép kivágásával, míg a contain megtartja a teljes képet, de esetleg üres területet hagy a konténerben.
Tippek az object-fit használatához
Az object-fit különösen hasznos reszponzív design esetén, de figyelni kell a felhasználói élményre.
- Használj cover értéket, ha a vizuális kitöltés a legfontosabb.
- Használj contain értéket, ha a teljes kép megőrzése a cél.
- Teszteld a különböző beállításokat mobilon és desktopon is, hogy a legjobb eredményt kapd.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
