CSS. Как масштабировать div вместе с содержимым под высоту экрана?
Но как сделать чтобы уровень масштабирования устанавливался сам соответственно высоте экрана? Я пробовал делать так:
.my_div
Но тогда масштабируется только сам div, а контент с текстом и изображениями может вылезать за его пределы (объём контента внутри div непредсказуем). Есть ли способ использовать нечто условно вроде вот такого:
zoom: 100vh; ? Дополнение: Я хотел использовать медиа-запросы, но насколько я понял, они просто возвращают мне ответ «да» или «нет» на мой вопрос о том, попадает ли текущая высота или ширина окна в некий указанный мной диапазон, например 500px. Допустим я получил ответ, что высота экрана меньше 500px.
И как мне это поможет?
Указать для каждой высоты экрана определённое значение zoom ? Но я не могу заранее предсказать каков будет контент блока, а значит и какова будет его высота, а значит и какое значение zoom мне использовать чтобы блок идеально вписался в окно браузера. Мне нужно найти способ динамического изменения свойства CSS ‘zoom’, при котором блок my_div будет масштабироваться (уменьшаться или увеличиваться) под текущую высоту экрана вместе со всем содержимым (размер текста также должен масштабироваться). Я подозреваю что на чистом CSS это сделать не выйдет.
scale()
Масштабирует элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях. Изменение масштаба может происходить как в большую, так и в меньшую сторону.
Масштабирование с помощью scale(sx, xy) продемонстрировано в табл. 1.
| transform: scale(1) | Исходное изображение. | |
 |
transform: scale(1.2) | Увеличение масштаба в 1,2 раза. |
|
transform: scale(1.2, 1) | Увеличение масштаба только по горизонтали в 1,2 раза. |
|
transform: scale(0.5) | Уменьшение масштаба в два раза. |
|
transform: scale(-1, 1) | Зеркальное отражение по горизонтали. |
|
transform: scale(1, -1) | Зеркальное отражение по вертикали. |
|
transform: scale(-1) | Зеркальное отражение по горизонтали и вертикали. |
Синтаксис
transform: scale(sx); transform: scale(sx, xy);Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
- значение больше 1 (например: 1.5) приводит к увеличению масштаба;
- значение меньше 1 (например: 0.8) приводит к уменьшению масштаба;
- отрицательное значение (например: -1) зеркально отражает элемент по горизонтали;
- значение 1 оставляет размер элемента исходным и не даёт видимого эффекта.
Одно значение задаёт масштабирование элемента одновременно по горизонтали и вертикали, с сохранением пропорций сторон элемента. Два значения задают масштаб элемента по горизонтали и вертикали независимо, что может привести к искажению пропорций сторон.
Песочница
Пример
В данном примере при наведении указателя на картинку она плавно увеличивает свой масштаб. Чтобы размеры блока оставались исходными используется свойство overflow со значением hidden .
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Transforms Module Level 1 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 4 | 11.5 | 3.1 | 3.5 |
| 2.1 | 3.5 | 12 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Рецепты
Функция scale()
С помощью функции scale() свойства transform можно увеличивать и уменьшать объекты на веб-странице. Принцип работы заключается в масштабировании элемента по горизонтали и вертикали с указанием коэффициента масштабирования. Пример:
transform: scale(3); /* пропорциональное увеличение элемента в 3 раза */ transform: scale(0.5); /* пропорциональное уменьшение элемента наполовину */
В начале темы, когда мы рассказывали о свойстве transform в целом, упоминалось, что трансформированные элементы могут накладываться на соседние. Наиболее наглядно показать это позволяет именно функция scale().
Параметры функции
В качестве параметров функция scale() принимает целые и дробные числа. Для пропорционального масштабирования достаточно указать нужное число в скобках. Так, число выше единицы увеличит масштаб, а число в диапазоне от 0.01 до 0.99 уменьшит его. Число 1 никак не масштабирует элемент, а число 0 приведет к визуальному исчезновению элемента.
Для более произвольного масштабирования можно указать два параметра — для горизонтали и вертикали соответственно. Например, следующий код увеличит масштаб элемента в четыре раза по горизонтали и в полтора раза по вертикали:
transform: scale(4, 1.5);
Отдельные функции для каждой оси
В CSS также имеется набор функций для управления масштабированием каждой из трех осей по отдельности — X, Y и Z. Называются они соответственно:
- scaleX() — масштабирование по горизонтали X;
- scaleY() — масштабирование по вертикали Y;
- scaleZ() — масштабирование по оси Z.
В качестве параметра принимаются те же числа, что и для основной функции.
Отрицательные числа в параметрах
Вы можете добиться эффекта «отражения в зеркале», если примените отрицательное число в качестве коэффициента масштабирования. При этом флип произойдет даже в том случае, если вы используете -1 (просто не будет эффекта масштабирования):
transform: scale(1, -1); /* флип по оси X */ transform: scale(-1, 1); /* флип по оси Y */ transform: scale(-1); /* флип по осям X и Y */
При использовании свойства transform на практике не забывайте про вендорные префиксы для обеспечения наилучшей кроссбраузерности.
Далее в учебнике: функция наклона skew().
Современные решения старых CSS-задач (3 часть): Масштабирование изображений на CSS
Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.
В не очень далёком прошлом, когда JQuery ещё был «Царём горы», наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch
Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это:
background-size: cover;Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться.
Альтернативный метод использует стандартный тег img и магию свойства
object-fit: cover;Давайте рассмотрим, как использовать каждое из решений и узнаем, в каких ситуациях следует отдавать предпочтение каждому из них.
Использование background-size: cover
В течение 10 лет я создавала глубоко настраиваемые темы и плагины для корпоративных сайтов, разработанных на WordPress. Рассмотрим сценарий использования свойства background-size: cover на примере карточки одного из тех шаблонов.
Начнём с примера, когда фоновое изображение элемента задаётся через background-image в HTML-атрибуте style . Рекомендуется использовать aria-label , который заменит атрибут alt , присутствующий в тегах img .
Whizzbang Widget SuperDeluxe
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.
Add to Cart Соответственно, CSS-стили могут быть следующими. Здесь используется трюк с padding-bottom , позволяющий задать соотношение сторон 16:9 для div-элемента, содержащего изображение:
.card__img < background-size: cover; background-position: center; /* Соотношение сторон 16:9 */ padding-bottom: 62.5%; >Всё вместе это будет выглядеть следующим образом:
Использование object-fit: cover
Это новый способ, который, согласно данным caniuse, можно использовать без полифила, только если вам не нужна поддержка IE и Edge < 16
Это свойство применяется непосредственно к тегу img , поэтому мы обновляем HTML-нашей карточки на следующий, меняя тег div на img и атрибут aria-label на alt :
Whizzbang Widget SuperDeluxe
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.
Add to Cart Затем CSS-код дополняется свойством height , которое будет ограничивать изображение любого размера так, чтобы оно имело заданное соотношение сторон. Если собственный размер изображения больше заданных ограничений, срабатывает свойство object-fit , которое по умолчанию центрирует изображение внутри границ, созданных контейнером карточки и свойством height :
.card__img
В результате получаем следующее:
Когда использовать каждое из решений
Если нужна поддержка старых версий IE, то если не подключать полифил, вы ограничены лишь решением background-size (мне грустно говорить это в 2020 году, но это всё ещё может быть актуально для корпоративного сектора и сферы образования).
Оба решения позволяют получить полноразмерное адаптивное изображение, основанное на контролируемом вами соотношении сторон.
Когда следует выбирать background-size :
- при использовании с контейнером, в котором предполагается размещать какое-то содержимое. Например, с шапкой сайта
- если необходимо применить дополнительные эффекты с помощью псевдоэлементов, которые нельзя использовать с тегом img
- если изображение носит декоративный характер и не потребности в семантике тега img
Когда следует выбирать object-fit :
- использование стандартного тега img лучше всего подходит для контекстных изображений, позволяя сохранить семантику