/ ↲
    Расширенный поиск

    CSS

    object-position

    Как картинка или видео должны располагаться внутри контейнера?

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Свойство помогает спозиционировать отрисовку картинки <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.

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

    Читайте также