Объект-позиция - CSS-хитрости

object-positionСвойство используется в сочетании с object-fitсобственностью и определяет , как элемент , такой как видео или изображение позиционируется с координатами X / Y внутри его содержимого коробки. Это свойство принимает два числовых значения, например 0 10%или 0 10px. В этих примерах первое число указывает, что изображение должно быть размещено слева от поля содержимого (0), второе - что оно должно располагаться на 10% или 10 пикселей сверху. Также можно использовать отрицательные значения.

Значение по умолчанию для object-position- это 50% 50%при использовании object-fitсвойства в изображении, так что по умолчанию все изображения располагаются в центре своего поля содержимого, например:

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

Демо

Ниже приведены несколько примеров того, как мы можем манипулировать object-positionизображением с установленным object-fitсвойством none. Если содержимое изображения не заполняет поле содержимого по какой-либо причине, тогда в незаполненном пространстве будет отображаться фон элемента, который может быть цветом или даже background-image, как в последнем примере:

Посмотрите положение объекта Pen Робина Рендла (@robinrendle) на CodePen.