Адаптивные круглые и другие пропорциональные блоки на CSS
Блок считает свободную ширину родительского блока , то есть 25% — 30px(левый и правый внутренние отступы) и устанавливает верхний внутренний отступ padding-top в значение 100% от высчитаной свободной ширины родительского блока , то есть теперь высота блока равна его ширине.
Блоку также установлено свойство position: relative; , чтобы относительно этого блока позиционировался дочерний блок
Далее просто добавляем блок и задаем ему следующие стили, чтобы он занял всю область блока
.aspect-ratio__body
Если не задать эти стили, то блок будет просто располагаться под верхним внутренним отступом блока
Чтобы сделать из квадрата круг, блоку добавляем сделующие стили
.aspect-ratio__body < position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; /* скрывает часть контента, которых выходит за пределы круга, в данном примере изображение */ border-radius: 50%; /* устанавливает со всех сторон радиус по половине стороны квадрата и получаем круг */ >Таким же образом можно сделать адаптивный пропорциональный прямоугольник любого размера
При произвольных размерах прямоугольника очень просто воспользоваться формулой для установки значения padding-top — calc((высота / ширина)*100%) (calc() можно использовать для всех браузеров)
Например, в макете горизонтальный прямоугольник шириной 754px и высотой 312px и нам нужно его пропорционально адаптировать, то блоку устанавливаем
.aspect-ratio__item < padding-top: calc((312/754)*100%); position: relative; >
Если в макете вертикальный прямоугольник шириной 200px и высотой 350px то устанавливаем следующее
.aspect-ratio__item < padding-top: calc((350/200)*100%); position: relative; >Адаптивный квадрат на CSS
Как вычисляется padding , если он указан в процентах? Очень просто:
При указании padding в процентах, значение считается от ширины родителя элемента.
Даже внутренний отступ сверху и снизу вычисляется именно исходя из ширины родителя. Поэтому реализовать адаптивный квадрат на CSS очень просто.
.square display: block; width: 50%;
>
.square:after content: '';
display: block;
padding-top: 100%;
>
- создаем блок, который хотим сделать квадратным
- помещаем внутрь элемент ( :after )
- делаем элемент блочным
- задаем элементу padding-top: 100%
Псевдоэлемент используется, чтобы не создавать лишний html элемент.
А как поместить контент?
Все сломается, если поместить в блок .square контент, например, текст. Наш квадрат превратится в прямоугольник. Эта проблема тоже решается очень просто.
.square position: relative;
display: block;
>
.square:after content: '';
display: block;
padding-top: 100%;
>
.content position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
>// html
