Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS
Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера?
Для изображений это делается очень просто, задаем свойству height значение auto , при этом максимальную ширину изображения ограничиваем шириной родительского контейнера max-width: 100%;
Проблема в том, что мы не можем задать height: auto; для блочных элементов, например для DIV. В данном случае 100% – это будет высота родителя.
Решение проблемы
Нам нужны два блочных элемента для достижения желаемого поведения. Нет изображений, нет Javascript.
Итак, что это? Мы определяем псевдоэлемент для нашего ящика и задаем ему margin-top 100% . Поскольку это 100% значение относится к ширине элемента … вы получаете его ( height: 0; padding-bottom: 100%; также будет работать, но тогда вы должны отрегулировать значение padding-bottom каждый раз, когда вы меняете ширину).
Таким образом, наш блок уже выше ширины. Если вы хотите отображать только несколько цветных блоков, тогда уже все готово. Но поскольку пользовательский интерфейс намного сложнее, и если вы также предоставляете некоторый контент, мы добавляем контент в наш блок .box .
Контент
И вот трюк: мы просто позиционируем блок контента как абсолютный со всеми четырьмя ориентациями, установленными в 0. Это просто покрывает родительский элемент полностью, независимо от того, какой размер он имеет.
Вот и все. Блестяще, не так ли? Даже padding не сломает его, и нет необходимости в box-sizing: border-box здесь.
Другие пропорции
Если вы хотите создать другие коэффициенты, просто измените значение padding-top псевдоэлемента:
IE7 и ниже
Поскольку IE такой IE, и особенно IE7 – это все, но только не браузер, вы должны сами создать элемент вместо псевдоэлемента в своей разметке, если хотите поддержать IE. Или бросьте на него Javascript, пока он, надеюсь, не сломается. Навсегда.
Мой вольный перевод статьи http://www.mademyday.de/css-height-equals-width-with-pure-css.html.
Рабочий пример на CodePen:
Вариант №2 – Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS без псевдоэлементов
Есть второй вариант без псевдоэлементов, но при его использовании блок всегда имеет ширину 100%, поэтому если нужно несколько таких блоков в ряд, то они должны быть помещены в какой-то родитель, у которого уже будет задана нужная ширина относительно остальных элементов на странице.
Понимание принципа работы пропорционального блока в HTML
Представьте, что нам необходимо создать такой блок в HTML, высота которого бы всегда была относительной от его ширины. К сожалению, в CSS нету таких единиц измерения как отношение к величине другого свойства. Но есть несколько трюков для имитации такого свойства. И сейчас мы их разберем.
Решение через <img />
Все, кто занимается HTML-версткой знают, что если тэгу <img /> принудительно указать ширину, но не указывать высоту, то высота будет рассчитана автоматически из соотношений высоты к ширине исходного изображения. Таким образом можно создавать пропорциональные блоки с динамической шириной, если помещать внутрь них тэг <img />.
Но использовать такой прием для создания пропорциональных блоков не рационально по ряду причин:
- Для создания пропорционального блока необходимо создавать изображение в графическом редактор с определенными пропорциями, сохранять его на сервер, загружать в браузер;
- Что бы поменять или “поиграться” с отношением сторон блока, нужно каждый раз пересоздавать изображение, что очень долго;
- Необходимость засорять network лишними файлами;
- Браузер тратит дополнительные ресурсы на растровый рендеринг;
Решение через Javascript
Сохранять пропорциональное соотношение сторон блока можно с помощью Javascript функции, которая запоминала бы начальное отношение сторон блока и далее производила бы расчеты и установку высоты по наступлению какого либо события:
Такой пример будет работать и позволит “играться” с отношением сторон, но давай подумаем: по какому событию эта функция должна вызываться? По событию изменения размеров окна? Возможно. А что если ширина контейнера будет изменена не размерами окна, а CSS-анимацией, или через flex, или через другой скрипт. Сколько нюансов придется предусмотреть. Создавать временной интервал, который бы раз в 100 мс производил перерасчет размеров? Все это делает скрипт слишком тяжелым. А если пропорциональных блоков должно быть несколько десятков — тогда наш браузер просто станет зависать. Соответственно, этот вариант так же не годится.
Правильно решение через padding-bottom
Существует нативное решение на чистом CSS, которое позволяет создать пропорциональный блок, не требующий загрузки изображений и использования вспомогательных скриптов. Создать такой пропорциональный блок можно используя особую способность свойства CSS padding-bottom/top рассчитывать свое значение относительно ширины старшего контейнера.
Для этого нам понадобиться три вложенных div элемента:
Старший контейнер div.top будет обладать требуемой шириной, которая может быть выражена в любой единицах измерения.
Вложенному в него контейнеру div.top>div мы установим значение ширины равной 100%, т.е. вложенный блок всегда будет растягиваться на ширину старшего контейнера. А значение padding-bottom вложенного блока div.top>div мы установим равное отношению высоты к ширине в процентах. Т.е. если нам нужен блок с соотношением сторон 2:1, то значением padding-bottom должно быть 50%.
Поскольку padding, по природе своей, является отступом между краем блока и его контентом, третий и заключительный контейнер div.top>div>div мы вынесем за пределы слоя, задав ему абсолютное позиционирование и 100% ширину, и высоту. В него мы разместим контент.
Таким образом, при изменении фактической ширины старшего контейнера div.top, padding-bottom вложенного в него div блока будет всегда принимать высоту, равную 50% от ширины div.top. И Vuole — мы получаем пропорциональный блок, калькулируемый Css процессором.
Это простое решение является самым оптимальным и производительным шаблоном для создания пропорциональных блоков в HTML, так как не загружает браузер ни вспомогательными графическими файлами, ни требует использования Javascript.
CSS — Высота блока относительно его ширины
В этой статье разберём, как в CSS можно установить блоку высоту в процентном отношении от его ширины. Применение этой технологии рассмотрим на примере создания карусели (слайдера) Bootstrap из изображений, имеющих различные размеры.
Создание блока с высотой, которая имеет определённый процент от его ширины
- Создать HTML структуру из 2 блоков: Первый блок имеет 2 класса. С помощью класса item-responsive установим блоку относительное позиционирование. Это необходимо выполнить для того, чтобы 2 блок (который будет иметь абсолютное позиционирование) располагался относительно него. Кроме этого данный класс также используется для того, чтобы перед содержимым соответствующих элементов ( item-responsive ) добавить псевдоэлемент :before . Этот элемент будет устанавливать необходимую высоту блока относительно его ширины с помощью CSS-свойства padding-top . Трюк данного метода заключается в том, что если свойству padding указывать значение не в пикселях, а в процентах, то оно будет рассчитываться браузером относительно его ширины. Таким образом, можно получить блок с необходимой высотой. Следующее действие — это указать 2 блоку абсолютное позиционирование и выровнять его по первому блоку.
- Добавить на страницу следующий CSS код:
Применение вышеприведённой технологии при создании карусели Bootstrap
Если вы не знакомы с Bootstrap и хотите узнать что это такое, то можете воспользоваться статьёй Введение в Bootstrap.
Рассмотрим пример, в котором вышеприведённую HTML структуру и CSS код будем использовать для отображения слайдов карусели Bootstrap.
В качестве изображений будем использовать следующие файлы:
- carousel_1.jpg (ширина = 736px, высота = 552px, соотношение сторон (высота к ширине) = 1,33);
- carousel_2.jpg (ширина = 1155px, высота = 1280px, соотношение сторон (высота к ширине) = 0,9);
- carousel_3.jpg (ширина = 1846px, высота = 1028px, соотношение сторон (высота к ширине) = 1,8);
- carousel_4.jpg (ширина = 1140px, высота = 550px, соотношение сторон (высота к ширине) = 2,07);
- carousel_5.jpg (ширина = 800px, высота = 600px, соотношение сторон (высота к ширине) = 1,33);
Изображения будем задавать как фон. Это позволит использовать в карусели Bootstrap 3 изображения с не одинаковыми соотношениями сторон.
Скриншот карусели Bootstrap 3 