qmzik 24 мая 2022 в 09:59

Первый взгляд на CSS свойство object-view-box

4 мин

3.8K

Веб-разработка*CSS*

Перевод

Автор оригинала: Ahmad Shadeed

Эта статья — перевод оригинальной статьи Ahmad Shadeed "First Look At The CSS object-view-box Property"

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Я всегда хотел, чтобы CSS умел обрезать изображение и размещать его в любом нужном мне направлении. Это стало возможным благодаря использованию дополнительного элемента HTML в сочетании с различными свойствами CSS, которые я объясню позже.

В этой статье я познакомлю вас с новым CSS свойством object-view-box, предложенным Джейком Арчибальдом в начале этого года. Это позволяет нам обрезать или изменять размер HTML-элементов, таких как <img> или <video>.

Проблема

В следующем примере у нас есть изображение, которое нужно обрезать. Обратите внимание, что нам нужна только определенная часть этого изображения.

В настоящее время мы можем решить это одним из следующих способов:

Использование <img> и его обёртывание в дополнительный элемент.
Добавления изображения через background-image и изменение положения и размера.

Обертывание дополнительным элементом

Это распространенное решение этой проблемы, вот как это происходит:

Обернул изображение в другой элемент (в нашем случае <figure>).
Добавил position: relative и overflow: hidden.
Добавил position: absolute для изображения и поиграл со значениями позиционирования и размера для достижения результата.

<figure>
    <img src="img/brownies.jpg" alt="">
</figure>

figure {
    position: relative;
    width: 300px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 15px;
}

img {
    position: absolute;
    left: -23%;
    top: 0;
    right: 0;
    bottom: 0;
    width: 180%;
    height: 100%;
    object-fit: cover;
}

Применение изображения в качестве фона

В этом решении мы используем тег <div> и добавляем ему свойство background-image, затем изменяем значения положения и размера.

<div class="brownies"></div>

.brownies {
  width: 300px;
  aspect-ratio: 3 / 2;
  background-image: url("brownies.jpg");
  background-size: 700px auto;
  background-position: 77% 68%;
  background-repeat: no-repeat;
}

Это прекрасно работает, но что, если мы хотим применить вышеописанное к тегу <img>? Ну, это то, что касается object-view-box.

Представляем Object-View-Box

Я был заинтригован, когда увидел, что свойство object-view-box может быть добавлено в Chrome 104. Теперь оно доступно в Chrome canary.

Обращаясь к CSS спецификации:

Свойство object-view-box определяет «view box» над элементом, аналогичное атрибуту <svg viewBox>, масштабирование или панорамирование содержимого элемента.

Свойство принимает значение basic-shape-rect, оно может иметь значения inset() | rect() | <xywh()>. Для демонстрации в этой статье я сосредоточусь на использовании inset().

Вернемся к проблеме.

С помощью object-view-box мы сможем использовать inset для рисования прямоугольника с четырех сторон (сверху, справа, снизу, слева), а затем применить object-fit: cover, чтобы избежать искажений.

<img src="img/brownies.jpg" alt="">

img {
    aspect-ratio: 1;
    width: 300px;
    object-view-box: inset(25% 20% 15% 0%);
}

Как это вообще работает? Не волнуйтесь, я объясню все ниже.

Исходный размер изображения

Исходный размер — это ширина и высота изображения по умолчанию. Изображение, с которым я имею дело, имеет размер 1194 × 1194 пикселей.

img {
    aspect-ratio: 1;
    width: 300px;
}

С помощью приведенного выше CSS размер отображаемого изображения будет 300 × 300 пикселей.

Наша цель — нарисовать прямоугольник на исходном изображении. Для этого мы будем использовать значение inset().

Применение значения inset

Значение inset() будет основано на исходной ширине и высоте изображения, в результате чего изображение будет обрезано. Это поможет нам в рисовании вложенного прямоугольника и управлении четырьмя краями, аналогично работе с полями или отступами.

Значение inset определяет прямоугольник. Мы можем управлять четырьмя ребрами точно так же, как мы имеем дело с полями или отступами. В следующем примере .card имеет inset в 20 пикселей со всех краев.

Вернемся к CSS для object-view-box.

img {
    aspect-ratio: 1;
    width: 300px;
    object-view-box: inset(25% 20% 15% 0%);
}

Вот как вышеизложенное выглядит за кадром. Значения 25%, 20%, 15% и 0% соответствуют верхнему, правому, нижнему и левому краю соответственно.

Исправляем искажение изображения

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

Это может быть легко реализовано с помощью хорошо поддерживаемого свойства object-fit.

img {
    aspect-ratio: 1;
    width: 300px;
    object-view-box: inset(25% 20% 15% 0%);
    object-fit: cover;
}

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

Увеличение или уменьшение масштаба

Мы можем использовать inset для увеличения или уменьшения изображения. Согласно моим тестам, переход или анимация не будут работать с object-view-box.

Мы также можем уменьшить масштаб с отрицательным значением вставки.

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

Демо

Вот демо, которое вы можете протестировать в Chrome Canary уже сегодня. Обязательно включите флаг «Экспериментальные функции веб-платформы».

Ссылка на Демо

Заключение

Я так заинтригован другими потенциальными вариантами использования этой новой функции. Это был быстрый первый взгляд, и я вернусь позже с новыми исследованиями.

Теги:

Хабы: