CSS właściwość object-position
- poprzednia strona object-fit
- następna strona odsetek
Definicja i użycie
Atrybut object-position, używany razem z object-fit, określa, jak应使用x/y współrzędne do lokalizacji <img> lub <video> w ich własnych ramkach zawartości.
Inne wskazówki:
Kurs CSS:CSS object-fit
Podręcznik CSS:CSS object-position
Podręcznik HTML DOM:Atrybut objectPosition
Przykład
Dostosuj rozmiar obrazu, aby pasował do jego ramki zawartości, i przesuń obraz o 5px w lewo oraz o 10% w górę:
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Gramatyka CSS
object-position: position|initial|inherit;
Wartość atrybutu
| Wartość | Opis |
|---|---|
| position |
Określa pozycję obrazu lub wideo w jego ramce zawartości. Pierwsza wartość kontroluje oś x, druga wartość kontroluje oś y. Może być ciąg liter (lewy, środek lub prawy) lub liczba (w px lub %). Dozwolone są wartości ujemne. |
| initial | Ustawia tę właściwość na jej wartość domyślną. Zobacz: initial. |
| inherit | Inherytuje tę właściwość od elementu nadrzędnego. Zobacz: inherit. |
Szczegółowe informacje techniczne
| Domyślna wartość: | 50% 50% |
|---|---|
| Inherytowanie: | tak |
| Tworzenie animacji: | Obsługiwane. Zobacz:Atrybuty związane z animacją. |
| Wersja: | CSS3 |
| Gramatyka JavaScript: | object.style.objectPosition="0 10%" |
Współpraca przeglądarek
Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
- poprzednia strona object-fit
- następna strona odsetek
