object-position

Свойство помогает спозиционировать отрисовку картинки <img> или видео <video> внутри контейнера, если к нему применили свойство object-fit.

Расположим изображение по верхнему краю элемента <img> и на расстоянии 50 пикселей от левого края. Для наглядности обозначим границы элемента.

        
          
          img {  display: block;  width: 350px;  height: 250px;  object-fit: cover;  object-position: 50px top;  border: 2px solid grey;}
          img {
  display: block;
  width: 350px;
  height: 250px;
  object-fit: cover;
  object-position: 50px top;
  border: 2px solid grey;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Представьте, дизайнер на макете предусмотрел место для квадратной картинки. А клиент прислал прямоугольную. Если вставить её так, как есть, то картинка будет либо ниже, чем задумано дизайнером, либо искажена, если указать конкретные ширину и высоту. В таком случае вам поможет object-fit, где вы можете указать, каким способом отобразить картинку, чтобы она не выглядела искажённой. Но тут может возникнуть ситуация, что важная часть изображения частично или полностью исчезнет из области видимости, и вам нужно будет его «подвинуть». Это как раз можно сделать при помощи object-position — свойство спозиционирует изображение относительно размера, заданного в разметке.

        
          
          img {  object-fit: cover;  object-position: bottom;}
          img {
  object-fit: cover;
  object-position: bottom;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

По применению и доступным значениям свойство похоже на background-position. Оно может принимать как значения в единицах измерения (пикселях, процентах и т. д.), так и с указанием расположения относительно границы элемента — bottom, top, center, left или right. Кроме того, как и в background-position, мы можем указать значения отдельно по вертикали и по горизонтали — первое значение обозначает ось x, второе — ось y. По умолчанию свойство позиционирует контент по центру элемента.

        
          
          img {  object-fit: cover;  object-position: top right;}
          img {
  object-fit: cover;
  object-position: top right;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В примере выше край изображения прижмётся к верхнему правому углу.

💡 Не работает без object-fit.

💡 Принимает отрицательные значения.