Руководство по CSS object-view-box

Написано Пиюшем Sinha✏️

Как фронтенд-разработчику, мне часто приходится работать с изображениями. И иногда возникает сложность, когда изображение масштабируется и располагается по-разному в приложении. Например, на сайте электронной коммерции может потребоваться увеличенная версия изображения на странице товара и увеличенная версия того же изображения при отображении списка товаров.

До выхода Chrome 104 для обрезки/масштабирования изображения я использовал его как background-image в div, а затем настраивал свойства background-position и background-size. Вот пример:

<div id="cropped"></div>

#cropped {
  width: 500px;
  aspect-ratio: 3/2;
  background-image: url("https://images.unsplash.com/photo-1611604548018-d56bbd85d681?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80");
  background-size: 1250px;
  background-position: 66% 67%;
  background-repeat: no-repeat;
}

Обрезка изображения с помощью свойств Background-Size и Background-Position

Он работает нормально, но, скажем так, это решение для обрезки/масштабирования изображений оставляет желать лучшего. Это не совсем то, что можно назвать опрятным. Кроме того, это не будет работать только с <img/> тегом. Существуют и другие обходные пути, но ни один из них не является таким простым и чистым, как object-view-box.

Что такое свойство object-view-box?

В выпуске Chrome 104 появился собственный подход к масштабированию или панорамированию содержимого элемента. Свойство CSS object-view-box делает это возможным, задавая окно просмотра над элементом и позволяя нам настроить позиционирование и масштабирование в соответствии с нашими конкретными потребностями.

Проще говоря, подобно тому, как объектив камеры можно настроить для увеличения или уменьшения масштаба, или панорамирования по внешнему виду, свойство object-view-box позволяет нам увеличивать масштаб определенных частей элемента или панорамировать для отображения различных частей элемента.

Как использовать object-view-box?

Чтобы задать поле просмотра над элементом, object-view-box использует функцию inset() для управления четырьмя краями.

inset() - это сокращенный способ указать значения для свойств элемента top, right, bottom и left, в таком порядке. Она имеет тот же синтаксис, что и свойства padding и margin, что позволяет ей принимать от одного до четырех значений:

1 значение: Применяется ко всем четырем краям
2 значения: Первое значение применяется к верхнему и нижнему краям, а второе - к левому и правому краям
3 значения: Первое значение применяется к верхнему краю, второе - к левому и правому краям, а третье - к нижнему краю.
4 значения: Применяется к верхнему, правому, нижнему и левому краям соответственно

Использование функции "Вставка" для управления четырьмя краями изображения

Эти значения могут быть выражены с помощью любой допустимой единицы длины CSS, например, пикселей (px), эм (em), рем (rem), процентов (%) и др.

Давайте применим это свойство к тому же изображению выше и попробуем добиться того же результата:

<img id="cropped" src="https://images.unsplash.com/photo-1611604548018-d56bbd85d681?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="toys">

#cropped {
  width: 500px;
  object-view-box: inset(40% 20% 20% 40%);
}

Возможные искажения

Если обрезанная версия изображения представляет собой квадрат, изображение будет выглядеть искаженным, т.е. растянутым или сжатым:

#cropped {
  aspect-ratio: 1;
  width: 500px;
  object-view-box: inset(40% 20% 20% 40%);
}

Искаженное изображение появляется, когда обрезанное изображение имеет квадратную форму

Здесь мы можем воспользоваться помощью свойства object-fit, которое определяет, как элемент должен быть изменен по размеру, чтобы соответствовать своему контейнеру. Свойство может иметь одно из следующих значений: fill, contain, cover, none или scale-down.

Для нашего сценария мы можем использовать cover, которое изменяет размер изображения в соответствии с соотношением сторон контейнера, а если соотношение сторон изображения не совпадает с соотношением сторон контейнера, то оно будет обрезано:

#cropped-fit-cover {
  aspect-ratio: 1;
  width: 500px;
  object-fit: cover;
  object-view-box: inset(40% 20% 20% 40%);
}

Обрезка изображения с помощью свойства Cropped-Fit-Cover

Разве это не удобный способ обрезать/масштабировать изображение? Для этого требуется только одно свойство, и его легко визуализировать. Никаких дополнительных свойств или элементов не требуется, в отличие от обходных путей.

Почему мы должны приветствовать это обновление?

Использование свойства object-view-box - это оригинальное решение; браузер делает тяжелую работу, а разработчики получают чистое решение.

Среди разработчиков существуют популярные обходные пути, например, использование элемента HTML - например, <div/> — и применения свойств CSS для получения обрезанного изображения. Но это все равно лишь обходной путь, нетрадиционное решение для преодоления ограничений браузера.

В этом обновлении браузер поработал над этим ограничением и предлагает встроенное решение.

Существует опасение, что для того, чтобы это работало, необходимо знать точные размеры исходного и нового контейнера. Но разве это не является необходимым условием для обрезки изображения? Чтобы определить, сколько нужно обрезать, нам всегда нужна эта информация.

Итак, как это будет работать при изменении размеров контейнера (изменение области просмотра)?

Поскольку объект-видовое окно использует функцию inset() для рисования видового окна над изображением, обрезка всегда происходит по внутреннему размеру (исходной ширине и высоте) изображения. Чтобы сделать его отзывчивым, мы можем использовать это свойство вместе с медиа-запросами и обрезать соответствующим образом.

Когда использовать object-view-box?

Возможность обрезать/масштабировать изображение может пригодиться во многих случаях:

Когда изображение необходимо масштабировать и позиционировать по-разному во всем приложении.
Интерактивная функция, когда пользователи могут увеличивать и панорамировать изображение, обычно встречается на сайтах электронной коммерции.
В небольших экранах просмотра изображения часто обрезаются. С помощью этого свойства и медиазапросов мы можем контролировать, какая часть изображения остается в поле зрения.

Заключение

В прошлом существовали обходные пути для обрезки и масштабирования изображений, но я приветствую это оригинальное и удобное решение. Также, пожалуйста, имейте в виду, что это экспериментальный выпуск, и поэтому он может не поддерживаться всеми браузерами. Посетите сайт caniuse.com для получения актуальных таблиц поддержки браузеров.

Поделиться:

Оглавление