Właściwość CSSEfekty
object-fit
Decyduje, jak obraz lub wideo wypełnia ramkę o innych proporcjach.
- Wartość domyślna
fill- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy zastępowane, np. img, video, iframe
- JavaScript
element.style.objectFit = "cover"
Przykład
#CSS
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
}HTML przykładu
<div style="display: flex; gap: 12px; align-items: center;">
<img class="avatar" src="/collections/covers/czy-warto-zostac-programista.webp" alt="" style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover;">
<span>Zdjęcie poziome w okrągłym awatarze, bez zniekształceń</span>
</div>Podgląd
Definicja i zastosowanie
#Właściwość object-fit dotyczy elementów zastępowanych, takich jak <img> i <video>. Gdy nadasz im wymiary o innych proporcjach niż sam plik, domyślnie obraz zostanie rozciągnięty i zniekształcony (fill).
cover wypełnia całą ramkę, przycinając nadmiar, a contain mieści cały obraz, zostawiając puste pasy. To odpowiedniki background-size: cover i contain, ale dla prawdziwych obrazów w HTML.
Przyciętą część wybierasz właściwością object-position. Domyślnie obraz jest wyśrodkowany.
Składnia
#Składnia
object-fit: fill | contain | cover | none | scale-down;Wartości
#- Obraz rozciągnięty do ramki, proporcje zniekształcone.
- Ramka wypełniona, brzegi obrazu przycięte.
- Cały obraz widoczny, puste pasy nad i pod nim.
- Obraz w naturalnym rozmiarze, przycięty do ramki.
- Mniejsza z opcji none i contain.
Wartości w praktyce
#fill
Obraz rozciągnięty do ramki, proporcje zniekształcone.
.demo { object-fit: fill; }cover
Ramka wypełniona, brzegi obrazu przycięte.
.demo { object-fit: cover; }contain
Cały obraz widoczny, puste pasy nad i pod nim.
.demo { object-fit: contain; }none
Obraz w naturalnym rozmiarze, przycięty do ramki.
.demo { object-fit: none; }scale-down
Mniejsza z opcji none i contain.
.demo { object-fit: scale-down; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Miniatury w siatce wyglądają jednolicie dzięki stałej ramce (np.
aspect-ratio: 1) iobject-fit: cover. - Do logotypów lepsze jest
contain, żeby żaden fragment znaku nie został ucięty.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.