Видео и изображения могут создавать проблемы при размещении сайта.
Допустим, вы явно указали ширину изображения в своем CSS. Если ширина указана в процентах или единицах просмотра, а высота изображения установлена на auto , изменение размера окна браузера сохранит соотношение сторон изображения.
Однако иногда у вас может быть ограничено доступное пространство, и вам нужно ограничить высоту изображения. Изменение размера окна браузера теперь определенно испортит его соотношение сторон.
Многие проблемы, связанные с размером изображения и соотношением сторон, включая ту, которую я только что обсудил, могут быть решены с помощью свойств CSS fit-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
Это свойство определяет, как заменяемое содержимое, например изображения и видео, занимают пространство внутри их поля содержимого. У него есть пять возможных значений:
-
fill -
contain -
cover -
none -
scale-down
Синтаксис для использования этого свойства показан ниже:
.fit-image { object-fit: fill|contain|cover|none|scale-down; }
Когда задано fill , размер изображения полностью соответствует размеру поля содержимого. Высота изображения в этом случае равна высоте самого поля. Это также начальное значение свойства object-fit объекта.
Значение contain изменяет размер изображения таким образом, чтобы изображение помещалось в его поле содержимого, при этом сохраняя его соотношение сторон. Это служит двум целям. Это позволяет избежать искажения изображения и в то же время удерживает изображение внутри поля содержимого. Если изображение не полностью покрывает поле содержимого, цвет фона, который вы могли установить, заполняет оставшееся пространство.
contain может быть полезно в ситуациях, когда вы не знаете размеры изображения, но по-прежнему хотите, чтобы оно помещалось внутри контейнера известной ширины.
Если вы хотите, чтобы изображение полностью заполняло пространство внутри его поля содержимого и сохранялось внутреннее соотношение сторон, вам следует использовать свойство cover . В этом случае изображение масштабируется таким образом, чтобы меньшая сторона изображения идеально вписывалась в ограничивающую рамку. Любая часть изображения, которая выходит за рамки, обрезается.
Чтобы показать изображение с его внутренними размерами и игнорировать любое значение высоты или ширины, установленное в ячейке, вы можете использовать его. Изображение не изменяется в этом случае. Тем не менее, если какая-либо часть изображения находится за пределами содержащей его рамки, она будет обрезана.
Наше окончательное значение 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% внизу справа. Это может быть полезно, когда вы не знаете размеры изображения.
Когда пропорции вашего изображения и содержащего его блока схожи, установка object-position не будет иметь большого значения. Тем не менее, результаты улучшаются, когда соотношения сторон заметны. Демонстрация CodePen ниже иллюстрирует мою точку зрения.
Установка положения в верхнем левом углу во втором случае возвращает солнце в фокус.
Еще одна вещь, о которой стоит упомянуть о свойстве 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%; } }
С помощью этого кода я анимирую положение изображения с помощью анимации ключевых кадров, и, как вы можете видеть, конечный результат выглядит великолепно.
Это может также использоваться в видео, когда фокус переходит от одного человека к другому.
Поддержка браузера и Polyfills
Хотя эти свойства могут оказаться очень полезными, возможность их использования в реальных условиях зависит от поддерживаемых вами браузеров . object-fit поддерживается во всех основных браузерах, кроме IE / Edge, а object-position поддерживается во всех основных браузерах, кроме IE / Edge и Safari.
Как правило, вам может понадобиться свойство object-fit . Если вы готовы пожертвовать пользовательским интерфейсом некоторых пользователей, вы можете воспользоваться этим свойством. Когда вам нужно поддерживать старые браузеры, вы можете попробовать полифилл от Федерико Бриганте .
Вывод
Я надеюсь, вам понравился этот урок и сопровождающие его демонстрации. Если есть что-то, что я пропустил или если вам есть что добавить, пожалуйста, дайте мне знать в комментариях.