Wizualizator CSS object-fit — dopasowywanie obrazów
Sprawdź na żywo efekt CSS object-fit i object-position dla dowolnego obrazu. Ustaw rozmiar kontenera, tryb dopasowania i skopiuj gotowy kod CSS.
-
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";
}
Tryb object-fit
wypełnij kadr — nadmiar obrazu jest przycinany, proporcje zachowane
object-position
preset albo własne procenty — przesuwa widoczny fragment obrazu
Kontener
wymiary kadru z formularza (szerokość × wysokość)
Obraz (naturalny)
naturalne wymiary pliku odczytane w przeglądarce po wczytaniu
<!-- HTML -->
<div class="ofv-frame">
<img class="ofv-media" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" alt="Preview media">
</div>
<!-- CSS -->
<style>
.ofv-frame {
width: 520px;
height: 320px;
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(0,0,0,.18);
background: repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 10px, rgba(0,0,0,.02) 10px 20px);
}
.ofv-frame .ofv-media {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
</style>
To dokładnie pięć opcji z listy „Dopasowanie (object-fit)” — przełącz je na podglądzie, a kafelki i kod zaktualizują się na żywo.
| Tryb | Co robi z obrazem | Proporcje | Kiedy używać |
|---|---|---|---|
| fill | rozciąga obraz do 100% szerokości i 100% wysokości kontenera | zniekształca | gdy proporcje obrazu i kadru są identyczne albo zniekształcenie nie ma znaczenia (wartość domyślna CSS) |
| contain | skaluje tak, żeby cały obraz zmieścił się w kadrze | zachowuje | logo, ikony, dokumenty — nic nie może zostać ucięte; puste obszary wypełnia tło kontenera (w narzędziu szachownica pokazuje je wprost) |
| cover | skaluje tak, żeby kadr był w pełni wypełniony, i przycina nadmiar | zachowuje | zdjęcia w kafelkach, banerach, awatarach — kadr ma priorytet, nie wszystkie części obrazu będą widoczne |
| none | wstawia obraz w naturalnym rozmiarze, bez skalowania | zachowuje | klatki sprite z arkuszy i obrazy o z góry ustalonym rozmiarze; obraz większy niż kadr jest przycinany, mniejszy zostaje z pustką |
| scale-down | wybiera mniejszy efekt z none i contain | zachowuje | miniatury i responsywne kadry — obraz nigdy nie zostaje powiększony ponad naturalny rozmiar |
object-position (narzędzie go obsługuje): 9 predefiniowanych pozycji (środek, góra, dół, lewo, prawo i 4 rogi) albo własne „X% Y%” z suwaków. Ma znaczenie, gdy obraz nie pokrywa kadru idealnie: przy contain i scale-down przesuwa puste paski, przy cover i none decyduje, który fragment przycięcia zostaje widoczny. Wartość trafia wprost do generowanego kodu CSS.
Warto wiedzieć — object-fit w praktyce
Domyślny fill zniekształca
Bez object-fit każde <img> rozciąga się do wymiarów kontenera — dlatego zdjęcie 4:3 wstawione do kwadratowego kadru wygląda „przyduszono”. Jedna linia object-fit: cover albo contain rozwiązuje problem bez ręcznego liczenia proporcji.
Cover tnie — wybierz, co zostanie
Cover gwarantuje pełny kadr, ale obcięcie potrafi urwać twarz albo logotyp. Suwaki X% Y% w narzędziu pokazują dokładnie to samo, co w produkcji: przesuwając object-position, decydujesz, który fragment przycięcia zostaje w kadrze.
Contain zostawia pustkę — zaplanuj tło
Contain mieści cały obraz, a wolne obszary przejmuje tło kontenera. Szachownica w narzędziu naśladuje przezroczystość: jeśli w produkcji tło ma być białe albo w kolorze marki, ustaw je na kontenerze, nie na obrazie.
Wygenerowany kod przeniesiesz 1:1
Blok „Kod HTML i CSS” zawiera gotową klasę kontenera (szerokość, wysokość, zaokrąglenie, obramowanie, tło) i regułę dla obrazu z wybranym object-fit oraz object-position. Skopiuj albo pobierz plik .html i wklej do własnego arkusza — wartości są identyczne z podglądem.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćWizualizator CSS object-fit – interaktywne dopasowywanie obrazów na stronach WWW
W nowoczesnym web designie responsywność (zdolność strony do poprawnego wyświetlania na ekranach o różnej rozdzielczości – od smartfonów po monitory 4K) to absolutny standard. Jednym z największych wyzwań dla front-end developerów i projektantów UI jest poprawne wyświetlanie obrazów i grafik o stałych proporcjach wewnątrz elastycznych kontenerów siatki (np. Flexbox lub CSS Grid). Bez odpowiedniego ostylowania, obrazy ulegają spłaszczeniu, rozciągnięciu lub zniekształceniu, co drastycznie psuje estetykę witryny. Rozwiązaniem tego problemu w języku CSS jest właściwość **object-fit**. Określa ona, w jaki sposób element pozycjonowany (najczęściej tag <img> lub <video>) powinien dopasować się do rozmiarów swojego kontenera rodzica. Nasz darmowy interaktywny **wizualizator CSS object-fit** online pozwala na przetestowanie wszystkich wartości tej właściwości na żywych przykładach graficznych.
Dzięki temu natychmiast zobaczysz różnice w działaniu poszczególnych opcji, wygenerujesz czysty kod CSS do wdrożenia na swojej stronie i unikniesz deformacji layoutu.
Porównanie wartości właściwości object-fit w CSS
Właściwość object-fit może przyjmować pięć podstawowych wartości. Poniższa tabela szczegółowo wyjaśnia zachowanie i behawiorystykę renderowania każdej z nich:
| Wartość CSS | Zachowanie proporcji obrazu | Czy obraz zostanie przycięty (cropped)? | Zalety i typowe przeznaczenie | Wady / Efekty uboczne |
|---|---|---|---|---|
fill (domyślna) |
Nie (obraz ulega zniekształceniu) | Nie | Obraz w 100% wypełnia przestrzeń kontenera rodzica. | Deformuje grafikę (rozciąga w pionie lub poziomie). Rzadko stosowane dla zdjęć. |
contain |
Tak | Nie | Cały obraz jest widoczny wewnątrz kontenera. Pozostała pusta przestrzeń jest uzupełniana tłem. Idealny do logo i ikon. | Mogą pojawić się puste pasy (tzw. letterbox) po bokach lub u góry i dołu. |
cover |
Tak | Tak (nadmiar obrazu zostanie obcięty) | Obraz wypełnia cały kontener bez deformacji. Bardzo popularne przy projektowaniu banerów (hero images) i kafelków produktów. | Część obrazu (krawędzie) staje się niewidoczna dla użytkownika. |
none |
Tak (zachowuje oryginalne wymiary pliku) | Tak (jeśli plik jest większy od kontenera) | Obraz ignoruje wymiary kontenera i wyświetla się w swojej naturalnej rozdzielczości pikselowej. | Brak skalowania – mały kontener pokaże tylko centralny fragment ogromnego zdjęcia. |
scale-down |
Tak | Nie (lub tak jak none) | Dynamicznie wybiera mniejszy rozmiar pomiędzy wartościami none a contain. |
Rzadziej stosowane, przydatne tylko w specyficznych galeriach o zmiennych rozmiarach miniatur. |
Rola właściwości object-position w precyzyjnym kadrowaniu
Kiedy używamy wartości object-fit: cover lub none, obraz jest domyślnie kadrowany do środka kontenera (pozycja centralna). Możemy to zachowanie zmienić za pomocą właściwości towarzyszącej – **object-position**. Działa ona analogicznie do background-position i pozwala przesunąć punkt skupienia kadru przy użyciu słów kluczowych (np. top left, bottom right) lub wartości procentowych i pikselowych (np. 20% 80%). Jest to niezwykle przydatne, gdy najważniejszy element zdjęcia (np. twarz modela) znajduje się przy krawędzi kadru i nie chcemy, aby został ucięty.
Jak korzystać z wizualizatora CSS object-fit?
Nasz wizualizator pozwala na interaktywne testowanie stylów na żywo:
- Wybierz wartość object-fit: Klikaj przyciski (fill, contain, cover, none, scale-down) w panelu kontrolnym, aby natychmiast zobaczyć, jak zmienia się dopasowanie grafiki w ramce testowej.
- Zmień proporcje kontenera: Użyj suwaków szerokości (width) i wysokości (height), aby zasymulować zachowanie kontenera na ekranie telefonu, tabletu i komputera.
- Dostosuj object-position: Zmieniaj współrzędne X i Y pozycjonowania kadru i obserwuj przesunięcie obrazu.
- Skopiuj gotowy kod CSS: W dolnej sekcji wyświetli się wygenerowana reguła CSS (np.
width: 100%; height: 300px; object-fit: cover; object-position: center;). Skopiuj ją i wklej do swojego arkusza stylów.
Często zadawane pytania (FAQ)
Do czego służy właściwość CSS object-fit i jak zapobiega deformacji grafik?
Właściwość object-fit służy do kontrolowania sposobu dopasowania i skalowania elementów multimedialnych (obrazów i wideo) wewnątrz kontenera o określonych wymiarach. Zapobiega deformacji poprzez zachowanie oryginalnych proporcji pliku (ang. aspect ratio), co eliminuje nienaturalne rozciąganie lub spłaszczanie elementów graficznych na responsywnych stronach.
Jaka jest różnica między wartością cover a contain w object-fit?
Wartość contain dba o to, aby **cały obraz** był widoczny na ekranie (skaluje go tak, by zmieścił się w kontenerze, co może pozostawić puste pasy). Wartość cover dba o to, by **cały kontener** był wypełniony obrazem (skaluje go i przycina nadmiarowe krawędzie), dzięki czemu nie ma pustych miejsc, ale część grafiki zostaje ukryta.
Jak właściwość object-position współpracuje z object-fit?
object-position definiuje punkt wyrównania obrazu wewnątrz kontenera, gdy ulega on przycięciu. Standardowo obraz jest centrowany (50% 50%). Za pomocą tej właściwości możesz przesunąć kadr, np. ustawiając object-position: top center, co sprawi, że podczas przycinania góra zdjęcia (np. głowa postaci) pozostanie widoczna, a odcięty zostanie dół.
Czy właściwość object-fit działa z elementami wideo (<video>)?
Tak, właściwość object-fit działa identycznie dla obrazów (tagi <img>) oraz plików wideo (tagi <video>). Jest powszechnie stosowana do tworzenia pełnoekranowych banerów wideo w tle stron głównych (hero video background) z użyciem wartości object-fit: cover.
Jaka jest kompatybilność właściwości object-fit z różnymi przeglądarkami?
Właściwość object-fit jest w pełni obsługiwana przez wszystkie nowoczesne przeglądarki internetowe, w tym Chrome, Firefox, Safari, Edge i Opera (wsparcie wynosi ponad 98% rynku). Jedyną przeglądarką, która jej nie obsługiwała, był przestarzały Internet Explorer (wymagał zastosowania specjalnych skryptów naprawczych typu polyfill).