CSS Властивість object-position
CSS властивість object-position використовується для визначення того, як <img> або <video> мають бути розміщені в своєму контейнері.
Зображення
Подивіться на наступне зображення з Парижу, воно складає 400x300 пікселів:
Потім ми використовуємо object-fit: cover;, щоб зберегти співвідношення сторін і заповнити задане вимірювання. Однак зображення буде обрізано за розміром, як тут:
Використання властивості object-position
Припустимо, частина зображення, яка відображається, розташована не так, як ми хочемо. Щоб розмістити зображення, ми будемо використовувати властивість object-position.
Тут ми будемо використовувати властивість object-position, щоб розташувати зображення так, щоб велика стара будівля була в центрі:
Приклад
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}
Спробуйте самі »
Тут ми будемо використовувати властивість object-position, щоб розташувати зображення так, щоб знаменита Ейфелева вежа була в центрі:
Приклад
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 15% 100%;
}
Спробуйте самі »
CSS Властивості Object-*
В наступній таблиці перераховані CSS властивості object-*:
| Властивість | Опис |
|---|---|
| object-fit | Визначає, як <img> або <video> має бути змінено, щоб відповідати своєму контейнеру |
| object-posititon | Визначає, як <img> або <video> має розташовуватись з координатами x/y всередині "власного поля змісту". |
