Właściwość CSSEfekty
object-position
Ustawia położenie obrazu lub wideo wewnątrz jego ramki.
- Wartość domyślna
50% 50%- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- elementy zastępowane, np. img, video
- JavaScript
element.style.objectPosition = "center top"
Przykład
#CSS
.team img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
}HTML przykładu
<img src="/collections/covers/programowanie-dla-dzieci.webp" alt="" style="width: 150px; aspect-ratio: 3 / 4; object-fit: cover; object-position: 60% top; border-radius: 12px;">Podgląd
Definicja i zastosowanie
#Właściwość object-position określa, który fragment obrazu jest widoczny, gdy object-fit przycina go do ramki, albo gdzie obraz stoi, gdy jest mniejszy od ramki. Działa jak background-position, ale dla elementów <img> i <video>.
Domyślnie obraz jest wyśrodkowany (50% 50%). Przy portretach często lepiej sprawdza się center top, żeby nie uciąć głowy, a przy krajobrazach center bottom.
Przyjmuje słowa kluczowe, procenty i długości, najpierw dla osi poziomej, potem dla pionowej.
Składnia
#Składnia
object-position: <pozycja-x> <pozycja-y>?;Wartości
#Wartości w praktyce
#center
Widoczny środek obrazu.
.demo { object-position: center; }left
Widoczna lewa część obrazu.
.demo { object-position: left; }right
Widoczna prawa część obrazu.
.demo { object-position: right; }30% 20%
Precyzyjny wybór widocznego fragmentu.
.demo { object-position: 30% 20%; }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
#- Przy zdjęciach osób ustaw
object-position: center top, żeby przycięcie nie obcinało twarzy. - Bez
object-fitinnego niżfillobraz wypełnia ramkę w całości i pozycja nie ma znaczenia.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.