Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.
Как использовать свойства CSS object-fit и object-position
Существует множество вариантов для определения размера и расположения фоновых изображений с помощью CSS
background-sizeиbackground-positionсвойств. Свойстваobject-fitиobject-positionпозволяют нам выполнять аналогичные действия со встроенными изображениями (а также другими заменяемыми элементами, такими как видео). В этой статье мы рассмотрим, как использоватьobject-fitдля размещения изображений на определенном пространстве и как использоватьobject-positionдля правильного позиционирования в этом пространстве.
Содержание:
- Для чего предназначен object-fit
- Как работает object-fit
- Поместить изображение в контейнер с помощью object-fit
- Использование object-fit без контейнера
- Использование object-fit в адаптивных макетах
- Установка положения изображений с помощью object-position
- Заключение
Для чего предназначен object-fit
Иногда изображение слишком велико для того пространства, в которое мы хотим его поместить. В прошлом нам приходилось либо обрезать изображение в графическом редакторе, либо изменять размер изображения, устанавливая ограничения по ширине и/или высоте (несовершенный вариант), либо выполнять какую-то сложную обрезку, или, возможно, прибегать к использованию фонового изображения вместо этого (жаль, если изображение предназначено не только для украшения).
object-fit Свойство делает для изображений то же, что background-size делает для фоновых изображений: оно предоставляет параметры отображения изображения в пределах выделенной области, скрывая часть его при необходимости. Эта выделенная область может иметь фиксированную ширину и высоту или это может быть более гибкое пространство, такое как область сетки, которая увеличивается, сжимается и изгибается в зависимости от размера окна просмотра браузера.
Как работает object-fit
Каждый HTML-элемент имеет свое собственное “поле содержимого”, которое представляет занимаемое им пространство. По умолчанию поле содержимого изображения соответствует естественным размерам изображения.
Когда мы применяем другую ширину и/или высоту к изображению, мы действительно меняем размеры поля содержимого. Если размеры поля содержимого изменяются, изображение по-прежнему будет заполнять поле содержимого. Итак, если у нас есть изображение 300pxх300px и мы задаем его размеры равными 300pxх200px, изображение будет выглядеть искаженным.
Свойство object-fit предоставляет нам параметры отображения изображения в этом измененном окне содержимого. Вместо того, чтобы изображение выглядело искаженным, мы можем скрыть часть изображения или заставить изображение лишь частично заполнить поле содержимого, чтобы оно было полностью видно и не искажалось.
Настройка
Чтобы подробно проиллюстрировать, как работает свойство object-fit, мы поместим изображение внутри div, которое центрировано с помощью Grid layout. Div имеет коричневый фон и пунктирную границу, создаваемую ::before псевдоэлементом, который поможет нам понять, что происходит с изображением.
Для наших демонстрационных изображений мы будем использовать следующее изображение (Ия на острове Санторини, Греция). Его естественные размеры указаны 400pxх600px.
Наше изображение намного больше, чем наш div, и если мы поместим изображение внутри div, оно вытянется наружу, как показано ниже.
Наша цель - не допустить, чтобы изображение вот так выскакивало из своего контейнера, но также сделать так, чтобы оно удобно помещалось в нем, и object-fit это поможет нам сделать.
Если бы мы работали с фоновым изображением, мы могли бы установить что-то вроде, background-size: cover и фоновое изображение было бы ограничено областью контейнера. Но, как мы видели, object-fit чтобы сделать что-нибудь полезное, нам сначала нужно определить высоту и ширину поля содержимого изображения, которые отличаются от его естественного размера. В приведенных ниже примерах мы ограничим ширину и высоту изображения на 100%, чтобы его поле содержимого соответствовало размеру контейнера div:
img {
width : 100 % ;
height : 100 % ;
}
Вот как это выглядит.
Изображение и его содержимое теперь плотно помещаются в контейнер, но изображение сильно искажено. Вот тут-то нам и приходит на помощь магия object-fit, так что давайте посмотрим, что она может предложить.
Поместить изображение в контейнер с помощью object-fit
Свойство object-fitпредлагает пять основных значений ключевых слов для определения того, как наше изображение будет отображаться в его контейнере. Два из этих ключевых слова — cover и contain — выполняют ту же роль, что и их двоюродные братья в background-size.
object-fit: cover
Значение cover заставляет изображение полностью покрывать область контейнера, показывая как можно большую часть изображения, не искажая его:
img {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
}
Поскольку изображение довольно высокое, мы видим его всю ширину, но не всю высоту, как показано на рисунке ниже.
Значение cover, вероятно, является наиболее полезным из предлагаемых, являясь основным вариантом в большинстве случаев.
Здесь стоит отметить позиционирование изображения. В отличие от background-position, который по умолчанию имеет значение 0 0 (размещение фонового изображения в левом верхнем углу контейнера), по умолчанию object-position является 50% 50%, который центрирует изображение в поле содержимого. Когда мы рассмотрим object-position свойство позже, мы узнаем, как указать, какая часть изображения видна.
object-fit: contain
contain Значение заставляет изображение полностью помещаться в поле содержимого, но без искажений. Изображение сохраняет свое естественное соотношение сторон и, следовательно, не заполняет свой контейнер:
img {
width : 100 % ;
height : 100 % ;
object-fit : contain ;
}
Может показаться, что мы получим тот же результат, что и выше, просто установив height: 100% на изображении и ничего больше. Но не совсем, поскольку в этом случае изображение будет располагаться слева, а не по центру, что используется по умолчанию с object-fit. В сочетании с object-position, object-fit предоставляет больше возможностей для позиционирования изображения внутри контейнера.
object-fit: none
Свойствоnone позволяет изображению сохранять его естественные, исходные размеры. Видна только та его часть, которая может поместиться в поле с измененным размером содержимого.
В отличие от object-fit: cover, наше изображение не обязательно должно быть полностью видимым хотя бы по одной оси. Исходное изображение шире и выше поля содержимого, поэтому оно растекается в обоих направлениях, как показано ниже.
Еще раз обратите внимание, что центр изображения по умолчанию совпадает с центром поля содержимого.
Также обратите внимание, что это object-fit: none не означаетobject-fit, что он “ничегоне делает”. Как мы можем видеть, он делает многое по сравнению с отсутствием object-fit настроек вообще. (Посмотрите, что произойдет с ручкой выше, если вы удалите object-fit: none в качестве напоминания.)
object-fit: scale-down
Свойство scale-down либо выполняет то же самое, что none или contain. Оно выбирает то, в результате чего изображение будет казаться меньше.
Очевидно, что в нашем текущем примере, contain это то, что он выберет, потому что наш контейнер меньше, чем изображение. Если бы наш контейнер был больше изображения, none это имело бы преимущественную силу, и изображение оставалось бы в своем естественном размере, а не заполняло контейнер в одном направлении, как вы можете видеть в этой демонстрации CodePen.
object-fit: fill
Если мы изменим значение object-fit на fill в нашей демонстрации, это будет выглядеть так, как будто object-fit оно вообще не установлено. Это потому, что по умолчанию изображение заполняет поле содержимого независимо от того, какие размеры установлены.
Поскольку fill свойство, вероятно, искажает изображение, к нему, вероятно, не стоит обращаться в большинстве случаев.
Использование object-fit без контейнера
В приведенных выше примерах мы использовали object-fit для изменения размера изображения в контейнере div, но принципы, которые мы видели на практике, работают так же хорошо и без этого контейнера. Важен размер поля содержимого изображения и то, как изображение отображается в этом поле.
Например, мы могли бы применить следующий CSS к изображению без какого-либо окружающего div:
img {
width : 300 px ;
height : 300 px ;
object-fit : contain ;
}
Результат показан в демонстрации CodePen ниже.
Попробуйте изменить значения в object-fit свойстве, указанном ручкой выше, на cover, fill, scale-down и none, чтобы посмотреть, как ведет себя каждое из них. Результаты такие же, как если бы изображению были заданы значения width и height 100% и содержались в div, для которого задано значение 300pxх300px.
Использование object-fit в адаптивных макетах
Свойство object-fit, вероятно, наиболее полезно в ситуациях, когда размеры выделенной области изображения соответствуют размеру окна просмотра браузера. Следующая демонстрация присваивает нашему изображению определенную область с гибкой сеткой:
img {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
grid-row : 2 / 3 ;
grid-column : 2 / 3 ;
}
article {
display : grid ;
grid-template : 5 % 1 fr 10 % / 40 % 1 fr 40 % ;
height : 100 vh ;
}
Поскольку области просмотра и сетки расширяются и сжимаются, cover значение гарантирует, что изображение всегда хорошо вписывается в свою область сетки, изменяя видимость изображения так, чтобы оно никогда не искажалось. (Ознакомьтесь с демонстрацией в полноэкранном режиме, чтобы лучше понять это.)
Установка положения изображений с помощью object-position
Так же, как background-position используется для установки положения фонового изображения в его контейнере, object-position свойство используется для управления положением элемента изображения в его собственном поле содержимого.
Как мы видели, по object-position умолчанию используется значение 50% 50%, что означает, что центр изображения совпадает с центром поля содержимого. Мы можем изменить это с диапазоном сайта значений (top, bottom, left, right, center), или с помощью значений длины (например px, emили %), или с помощью комбинации обоих.
Допустим, теперь мы хотим расположить наше изображение справа внизу. Мы могли бы использовать ключевые слова right bottom или процентные значения 100% 100%:
img {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
object-position : right bottom ; /* or 100% 100% */
}
Изображение ниже иллюстрирует расположение нашего изображения сейчас.
Вы можете поиграть с ключевыми словами позиционирования, показанными ручкой выше, чтобы посмотреть, как они работают, вместе с object-fit ключевыми словами, но результаты должны быть легко предсказуемы.
Мы также можем смещать изображение из его контейнера с помощью таких единиц измерения, как пиксели или ems. Например:
img {
width : 100 % ;
height : 100% ;
object-fit : cover ;
object-position : 20 px 2 em ; /* 20px слева и 2em справа */
}
Мы могли бы сделать аналогичное смещение от нижнего правого угла, объединив единицы измерения и ключевые слова, например:
img {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
object-position : right 20 px bottom 2 em ; /* 20px from right and 2em from bottom */
}
Мы уже видели, что мы можем позиционировать наше изображение в его поле содержимого с процентами. Как и в случае со свойством background-position, использование percentages с object-position может немного сбить с толку. object-position Of 50% 50% означает, что центр изображения совпадает с центром поля содержимого как по горизонтальной, так и по вертикальной осям.
Если мы установим object-position значеним 20% 40%, это означает, что вертикальная линия в 20% от левой части изображения совпадает с вертикальной линией в 20% от левой части поля содержимого, а горизонтальная линия в 40% от верхней части изображения совпадает с горизонтальной линией в 40% от верхней части поля содержимого, как показано ниже.
Мы можем увидеть это на практике в демонстрации CodePen ниже.
Заключение
object-fit Свойство предназначено для работы с любыми заменяемыми элементами, такими как изображения, видео, iframes и вставки. Насколько полезно помещать элементы, такие как видео, в определенную область (где некоторые элементы могут быть скрыты), возможно, является предметом дискуссий, но, без сомнения, существуют жизнеспособные варианты использования. Лучшим вариантом может быть установка ширины iframe равной width: 100% доступному пространству, а затем использование свойства aspect-ratio для сохранения его пропорций.
Чаще всего требуется определенное пространство, в которое должно поместиться изображение, поэтому object-fit это очень полезно для того, чтобы изображение помещалось в это пространство без искажений (даже если часть его приходится скрывать).
Наконец, как отмечалось выше, стоит сравнить свойства object-fit и object-position со свойствами background-size и background-position, которые имеют много общего. Ознакомьтесь с тем, как использовать CSS background-size и background-position, чтобы быстрее освоиться с ними.
