CSS Object-Fit Visualizer
Sprawdź na żywo efekt CSS object-fit i object-position dla dowolnego obrazu. Ustaw rozmiar kontenera, tryb dopasowania i skopiuj gotowy kod CSS. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Wizualizator CSS object-fit
Sprawdź na żywo, jak właściwość object-fit wpływa na wyświetlanie obrazu w kontenerze o dowolnym rozmiarze. Wybierz tryb dopasowania, pozycję, zaokrąglenie narożników i skopiuj gotowy kod CSS jednym kliknięciem.
Do czego służy
Właściwość object-fit kontroluje, w jaki sposób element <img> lub <video> wypełnia swój kontener. Tryb cover przycina obraz, zachowując proporcje i wypełniając kadr bez białych pasków — idealny dla zdjęć w galeriach i kafelkach. Tryb contain zmieści cały obraz wewnątrz kontenera, nie przycinając go — przydatny dla logo i ikonografiki. Tryby fill, none i scale-down pozwalają na pełną kontrolę nad skalowaniem. Narzędzie pozwala zobaczyć efekt każdego trybu w czasie rzeczywistym, zanim wstawisz kod do projektu.
Jak używać
Wklej URL dowolnego obrazu, ustaw szerokość i wysokość kontenera (w pikselach), wybierz tryb object-fit i opcjonalnie pozycję (object-position). Możesz też wybrać zaokrąglenie narożników i kolor tła podglądu (szachownica pokazuje przezroczystość). Kliknij „Przetwórz" — po prawej stronie pojawi się wizualny podgląd obrazu z dokładnie tymi stylami, a poniżej gotowy blok CSS do skopiowania i wklejenia w swoim projekcie.
Najczęstsze pytania
Jaka jest różnica między cover a contain?
cover skaluje obraz tak, by wypełnił cały kontener — części obrazu mogą zostać przycięte. contain skaluje obraz tak, by zmieścił się w całości, pozostawiając ewentualne puste przestrzenie po bokach lub na górze/dole.
Czy object-fit działa na wszystkich przeglądarkach?
Tak — właściwość object-fit jest obsługiwana przez wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari, Edge) od wielu lat. Jedynym wyjątkiem jest Internet Explorer 11, który jej nie obsługuje.
Do czego służy object-position?
object-position określa, który fragment obrazu ma być widoczny, gdy obraz jest przycinany (np. przy object-fit: cover). Domyślnie jest to środek (center), ale możesz przesunąć „okno" na konkretną część obrazu, np. twarz na zdjęciu portretowym.
Czy mogę użyć wygenerowanego kodu bezpośrednio w projekcie?
Tak. Skopiuj blok CSS z sekcji „Kod CSS" i wklej do swojego arkusza stylów. Nazwy klas ofv-frame i ofv-media możesz zmienić na własne — ważne są wartości właściwości CSS.