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.