Использование CSS свойств object-fit и object-position
Видео и изображения могут создавать проблемы при создании веб-сайта.
Допустим, вы явно указали ширину изображения в CSS. Если ширина указана в процентах или единицах области просмотра, а для высоты изображения установлено значение auto, изменение размера окна браузера сохранит соотношение сторон изображения.
Однако иногда пространство может быть ограничено, и необходимо наложить ограничение на высоту изображения. Изменение размера окна браузера сейчас определённо нарушит соотношение сторон изображения.
Многие проблемы, связанные с размером и соотношением сторон изображения, включая ту, о которой я только что говорил, можно решить с помощью свойств CSS object-fit и object-position.
Эти свойства похожи на более знакомые свойства background-size и background-position. Поэтому, даже если вы никогда не слышали о них раньше, вам не составит труда понять, как они работают.
Оба свойства работают для заменённых элементов. Однако для краткости в этой статье я буду использовать термин изображение вместо заменённого элемента.
Зачем использовать object-fit и object-position
Вы можете задаться вопросом, зачем вообще использовать эти два свойства, если можно использовать background-size и background-position. На самом деле, есть как минимум две веские причины.
Во-первых, рассмотрим сценарий, в котором у вас есть изображение, предназначенное для размещения в статье. Если размеры изображения заданы в CSS, как в случае, описанном во введении, изменение размеров окна браузера нарушит соотношение сторон изображения. В этом случае у вас возникнет соблазн использовать div со свойствами background-size и background-position, поскольку простого использования тега img будет недостаточно.
Проблема с этим решением заключается в том, что вы всегда должны стараться разделять содержание и презентацию. Свойства фона предназначены для использования в целях презентации. Когда ваши изображения являются частью контента, для достижения того же результата имеет смысл использовать object-fit и object-position вместе с тегом img.
Другая причина заключается в том, что свойства фона не могут быть применены к видео, в то время как object-fit и object-position могут. Поэтому при отображении видео object-fit и object-position являются единственными вариантами.
Свойство object-fit
Это свойство определяет, как заменяемое содержимое, такое как изображение и видео, занимает пространство в блоке содержимого. Оно имеет пять возможных значений:
fillcontaincovernonescale-down
Синтаксис использования этого свойства показан ниже:
.fit-image {
object-fit: fill|contain|cover|none|scale-down;
}Если установлено значение fill, размер изображения устанавливается таким образом, чтобы оно полностью помещалось в поле содержимого. Высота изображения в этом случае равна высоте самого поля. Это также является начальным значением свойства object-fit.
Значение contain изменяет размер изображения таким образом, что оно помещается в поле содержимого, сохраняя при этом соотношение сторон. Это служит двум целям. Это позволяет избежать искажения изображения и в то же время сохранить его в пределах поля содержимого. Если изображение не полностью покрывает поле содержимого, то цвет фона, который вы могли установить, заполняет оставшееся пространство.
Значение contain может быть полезно в ситуациях, когда вы не знаете размеров изображения, но хотите, чтобы оно поместилось в контейнер известной ширины.
Если вы хотите, чтобы изображение полностью заполнило пространство внутри контейнера содержимого и при этом сохранило присущее ему соотношение сторон, используйте свойство cover. В этом случае изображение масштабируется таким образом, что меньшая сторона изображения полностью помещается в поле содержимого. Любая часть изображения, которая выходит за пределы поля, затем обрезается.
Чтобы показать изображение с его собственными размерами и игнорировать любое значение высоты или ширины, установленное для содержащего поля, вы можете использовать none. В этом случае размер изображения не изменяется. Однако если какая-либо часть изображения выходит за пределы содержащего поля, она будет обрезана.
Наше последнее значение object-fit — scale-down. Как следует из названия, оно уменьшает масштаб изображения. Это означает, что размер изображения будет изменён, как если бы оно было установлено в none или contain, в зависимости от того, какое значение приведёт к уменьшению изображения. Другими словами, если ни один из размеров нашего изображения не превышает соответствующие размеры содержащего его бокса, будет применено значение none.
Свойство object-position
Как мы видели ранее, свойство cover заполняет все пространство внутри содержащего поля, сохраняя при этом присущее изображениям соотношение сторон. По умолчанию изображения также размещаются по центру. В ситуациях, когда точка фокусировки находится в центре, это будет хорошо работать. Но что, если точка фокусировки изображений находится не в центре?
Здесь вам поможет свойство object-position. Оно работает так же, как и background-position. Приведённый ниже фрагмент кода устанавливает положение изображения в левом верхнем углу:
.zero-zero {
object-position: 0px 0px;
}Вместо того чтобы указывать размеры в пикселях, можно использовать проценты. Например, object-position: 0% 0% — это верхний левый угол, а object-position: 100% 100% — внизу справа. Это может быть полезно, когда вы не знаете размеров изображения.
Если соотношение сторон изображения и содержащего его бокса одинаково, установка объектного положения не будет иметь большого значения. Однако результаты улучшаются, если соотношения сторон отличаются на заметную величину. Демонстрация CodePen ниже иллюстрирует мою точку зрения.
Установка object-position в top-left во втором случае возвращает солнце в фокус.
Ещё одна вещь, которую стоит упомянуть о свойстве object-position, заключается в том, что оно является анимируемым и при правильном использовании может создавать потрясающие эффекты. Рассмотрим приведённый ниже код:
img {
/* other CSS here... */
object-fit: cover;
object-position: 0% 0%;
animation: ltr 5s alternate infinite;
}
@keyframes ltr {
0% {
object-position: 0% 0%;
}
25% {
object-position: 20% 0%;
}
100% {
object-position: 100% 100%;
}
}С помощью этого кода я анимирую положение изображения, используя анимацию ключевых кадров, и, как вы можете видеть, конечный результат выглядит великолепно.
Возможно, это также можно использовать в видео, когда фокус перемещается с одного человека на другого.
Поддержка браузеров и полифиллы
Хотя эти свойства могут оказаться очень полезными, возможность их использования в реальном мире зависит от поддерживаемых браузеров. Свойство object-fit поддерживается во всех основных браузерах, кроме IE/Edge, а object-position поддерживается во всех основных браузерах, кроме IE/Edge и Safari.
Как правило, вам может понадобиться только свойство object-fit. Если вы готовы пожертвовать пользовательским опытом некоторых пользователей, вы можете использовать это свойство. Если вам нужна поддержка старых браузеров, вы можете попробовать полифилл от Federico Brigante.
Заключение
Надеюсь, вам понравилась эта статья и сопровождающие её демонстрации.