Адаптивный квадрат на CSS
Как вычисляется padding , если он указан в процентах? Очень просто:
При указании padding в процентах, значение считается от ширины родителя элемента.
Даже внутренний отступ сверху и снизу вычисляется именно исходя из ширины родителя. Поэтому реализовать адаптивный квадрат на CSS очень просто.
- создаем блок, который хотим сделать квадратным
- помещаем внутрь элемент ( :after )
- делаем элемент блочным
- задаем элементу padding-top: 100%
Псевдоэлемент используется, чтобы не создавать лишний html элемент.
А как поместить контент?
Все сломается, если поместить в блок .square контент, например, текст. Наш квадрат превратится в прямоугольник. Эта проблема тоже решается очень просто.
Снова по порядку:
- Задаем position: relative; для нашего квадратного блока
- Весь контент оборачиваем в html-блок .content
- Позиционируем .content абсолютно
- Растягиваем .content на всю ширину и высоту блока .square
Так как .content спозиционирован абсолютно — контент, находящийся внутри не будет растягивать квадрат.
Как сделать адаптивный квадрат на css
Здесь нужно изначально понимать, что ширина элемента вычисляется как процент от его родительской ширины, а его высота вычисляется как процент от высоты его родителя. Поскольку наша ширина и высота вычисляются из разных измерений, квадрат больше не будет сохранять свою форму.
Основным концептуальным и буквальным строительным блоком наиболее отзывчивых форм CSS является прямоугольник. С точки зрения геометрии прямоугольник является параллелограммом, где каждый угол является прямым углом. Это означает, что как только вы узнаете как сделать отзывчивый прямоугольник CSS, вы автоматически узнаете, как сделать отзывчивый квадрат CSS.
Давайте перейдем к созданию, так как оказалось это не сложно.
Это будет по умолчанию:
Здесь видим его сжатым, но описание внутри осталось на мести и не вылазит за рамки.
Если бы вы изменили ширину и высоту в CSS для этого прямоугольника с фиксированным размером в процентах, ваш код не работал бы и ничего не отображалось бы. Причина, по которой это не будет работать, состоит в том, что процентная высота всегда вычисляется на основе высоты элемента, и в этом случае высота элемента всегда будет равна нулю.
Адаптивные круглые и другие пропорциональные блоки на CSS
Блок <div > считает свободную ширину родительского блока <div > , то есть 25% — 30px(левый и правый внутренние отступы) и устанавливает верхний внутренний отступ padding-top в значение 100% от высчитаной свободной ширины родительского блока <div > , то есть теперь высота блока равна его ширине.
Блоку <div > также установлено свойство position: relative; , чтобы относительно этого блока позиционировался дочерний блок <div >
Далее просто добавляем блок <div > и задаем ему следующие стили, чтобы он занял всю область блока <div >
Если не задать эти стили, то блок <div > будет просто располагаться под верхним внутренним отступом блока <div >
Чтобы сделать из квадрата круг, блоку <div > добавляем сделующие стили
Таким же образом можно сделать адаптивный пропорциональный прямоугольник любого размера
При произвольных размерах прямоугольника очень просто воспользоваться формулой для установки значения padding-top — calc((высота / ширина)*100%) (calc() можно использовать для всех браузеров)
Например, в макете горизонтальный прямоугольник шириной 754px и высотой 312px и нам нужно его пропорционально адаптировать, то блоку <div > устанавливаем
Если в макете вертикальный прямоугольник шириной 200px и высотой 350px то устанавливаем следующее