object-position: положение содержимого изображения
object-position задаёт положение содержимого заменяемого элемента, например изображения, внутри его собственной коробки.
Назначение
object-position задаёт положение содержимого заменяемого элемента, например изображения, внутри его собственной коробки.
Как это работает
Свойство часто используют вместе с object-fit:cover, когда часть изображения обрезается. Проценты описывают выравнивание свободного или выходящего за границы содержимого, а не перемещение внешней коробки.
Пример
<style>
.preview{width:180px;height:180px;object-fit:cover;object-position:left center;border:1px solid}
</style>
<img class="preview" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180'%3E%3Crect width='180' height='180' fill='%2311694e'/%3E%3Crect x='180' width='180' height='180' fill='%23e8b44c'/%3E%3C/svg%3E" alt="Двухцветный образец кадрирования">Что должно получиться
В квадратной области видна левая зелёная часть широкого образца. При right center будет показана правая жёлтая часть без изменения положения самой рамки.
Граница применения и частая ошибка
Не пытайтесь этим свойством переместить сам img в раскладке. Для положения элемента существуют отступы и модели раскладки; object-position относится к содержимому внутри него.
Самостоятельная проверка
В локальном проекте возьмите широкую фотографию с объектом у края. Сравните center и left center в квадратной рамке и проверьте, какой вариант сохраняет важную часть кадра.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.