HTML: как изменить размер изображения с помощью запросов к контейнеру CSS!

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

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

Итак, у нас есть реклама Vans на боковой панели сайта, который мы создаем, и в настоящее время это изображение.

Это затрудняет редактирование; дизайнеру придется обновить его и предоставить нам новое изображение, если что-то нужно будет изменить.

Кроме того, нам, вероятно, понадобится несколько версий для использования с исходным набором, чтобы он выглядел четко на дисплеях как с высокой плотностью, так и с низким разрешением.

Итак, перед нами стоит задача преобразовать его в HTML; Как мы можем это сделать?

Некоторые недостатки использования изображений и единиц видового экрана

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

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

Настройка контейнера с помощью свойства CSS container-type

Хорошо, давайте проверим, с чего мы начнем.

Итак, здесь он выглядит довольно хорошо, но как он реагирует?

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

 figure { aspect-ratio: 1 / 1.5; }

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

Чтобы использовать здесь контейнерные запросы, нам нужно определить так называемый контекст включения. Мы можем сделать это с помощью свойства container-type . В этом примере мы можем использовать значение встроенного размера.

 figure { ... container-type: inline-size; }

Это позволит настроить контейнер, который будет определять размеры объектов в зависимости от их встроенного размера, который в данном случае будет шириной фигуры. Хорошо, теперь у нас есть контейнер для мониторинга, и теперь мы можем свободно использовать блоки запросов контейнера. И есть из чего выбрать. Мы можем использовать любое из этих значений единицы измерения:

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

Здесь мы собираемся использовать cqi , который, как мне кажется, означает встроенный запрос контейнера. Одна единица cqi равна одному проценту ширины контейнера. Хорошо, это все, что нам нужно; отсюда мы просто устанавливаем единицы измерения по мере необходимости.

Здесь у нас есть пара пользовательских свойств, которые используются в нескольких элементах этого объявления.

 figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }

Начнем с того, насколько этот кадр вставлен от внешнего края контейнера. Давайте сделаем это тремя cqi .

 figure { ... --frameInset: 3cqi; }

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

Итак, первое значение — это один пиксель, второе — динамическое значение. Давайте сделаем это одним cqi .

 figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }

Теперь для strong элемента, которым является главный заголовок, текст «Ванс», давайте сделаем двадцать пять cqi . А для пространства под заголовком давайте сделаем три cqi .

 strong { font-size: 25cqi; padding-bottom: 3cqi; }

Теперь давайте перейдем к подзаголовку «Off the Wall». Он должен быть примерно вдвое меньше основного заголовка, поэтому давайте попробуем двенадцать cqi . А для пространства над текстом снова возьмем три cqi .

 em { font-size: 12cqi; padding-top: 3cqi; }

Хорошо, для последней части, надписи «С 1966 года», давайте выберем размер шрифта шесть cqi . А для пространства сверху и снизу мы используем логическое свойство для padding-block , которое принимает до двух значений. Первое значение — это значение над текстом, а второе значение — это пространство ниже.

Итак, давайте рассмотрим два cqi описанные выше. И в наших расчетах мы оставим --frameInset как есть, но добавим пять cqi дополнительного пространства.

 time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }

Хорошо, круто, это выглядит хорошо.

Давайте посмотрим, как он отреагирует. Когда мы его сжимаем, все реагирует правильно и равномерно, как мы и хотели. Это очень похоже на картинку.

Он выглядит довольно хорошо, даже когда он маленький, и вы можете видеть, что границы никогда не уменьшаются ниже одного пикселя. Затем, когда мы добираемся до действительно узкой ширины, она становится шире, и все по-прежнему выглядит великолепно.

Насколько это круто? Один набор стилей, и он работает полностью. Когда мы масштабируем его вперед и назад, он выглядит великолепно.

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

 <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div> 

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

Хотите увидеть это в действии?

Ознакомьтесь с демонстрационным кодом и примерами этих методов в примере Codepen ниже. Если у вас есть какие-либо вопросы или мысли, не стесняйтесь оставлять комментарии.