Как сделать адаптивный квадрат на css
Здесь нужно изначально понимать, что ширина элемента вычисляется как процент от его родительской ширины, а его высота вычисляется как процент от высоты его родителя. Поскольку наша ширина и высота вычисляются из разных измерений, квадрат больше не будет сохранять свою форму.
Основным концептуальным и буквальным строительным блоком наиболее отзывчивых форм CSS является прямоугольник. С точки зрения геометрии прямоугольник является параллелограммом, где каждый угол является прямым углом. Это означает, что как только вы узнаете как сделать отзывчивый прямоугольник CSS, вы автоматически узнаете, как сделать отзывчивый квадрат CSS.
Давайте перейдем к созданию, так как оказалось это не сложно.
Это будет по умолчанию:
Здесь видим его сжатым, но описание внутри осталось на мести и не вылазит за рамки.
.zornet_ru_kerdsa <
position: relative;
width: 50%;
overflow: hidden;
background: #2e5fa0;
>
.zornet_ru_kerdsa:before <
content: «»;
display: block;
padding-top: 100%;
>
.adaptberskin <
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #f3efef;
>
.adaptberskin div <
display: table;
width: 100%;
height: 100%;
>
.adaptberskin span <
display: table-cell;
text-align: center;
vertical-align: middle;
color: #fbf7f7;
font-size: 17px;
font-weight: bold;
>
Если бы вы изменили ширину и высоту в CSS для этого прямоугольника с фиксированным размером в процентах, ваш код не работал бы и ничего не отображалось бы. Причина, по которой это не будет работать, состоит в том, что процентная высота всегда вычисляется на основе высоты элемента, и в этом случае высота элемента всегда будет равна нулю.
Как сделать Резиновый квадрат с контентом?
НО, так не нормально, потому что все работает так же как если бы я указывал раззмеры в vw/vh.
- Вопрос задан более трёх лет назад
- 5262 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 3
В чем секрет кота Бориса?
будет уменьшаться относительно высоты.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Можно еще через padding-bottom, так как padding и margin берут значения ширины блока. VW и vh не подлерживаются safari. P.S. давно сюда не заходил
Сергей Петроченко @serg160485
Думаю квадрат у вас не выйдет резиновый, поскольку его резиновость пойдет в ту или иную сторону взависимости от контента, может быть только на js спрограммировать, но тоже сомнительное занятие.
Ответ написан более трёх лет назад
Нравится 1 5 комментариев
Banny_Boom @Banny_Boom Автор вопроса
с js знаю решение, но не хотелось бы прибегать лишний раз к js)
Сергей Петроченко @serg160485
На чистом css не уверен что получится пропорционально изменять блок! только если в него квадраного ребенка вставлять))) типо картинки
Banny_Boom @Banny_Boom Автор вопроса
Сергей Петроченко: тогда это выйдет статичный квадрат :c
Сергей Петроченко @serg160485
Даже не знаю что сказать) думаю ничто не пострадает если вы все-таки jquery примените, к блоку нужному jQuery(«.square»).on(«resize»,function() <
ну а тут вычисляйте размеры типо что больше высота или ширина и в зависимости от этого , одно под другое подстраивается
>);
Адаптивные круглые и другие пропорциональные блоки на 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; >Вёрстка адаптивного квадрата
Задача лежит в том, чтобы сделать адаптированный квадрат.
ТО есть страница динамическая, может иметь и 500px в ширину может и 1000, как мне сохраняя пропорции сделать квадрат?
Просто обычный квадратный. В динамической форме.
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Вёрстка адаптивного слайдера
Может быть кто то может поделиться слайдером адаптивным. Высотой 300 а ширина будет в блоке до.
Вёрстка адаптивного меню
Здравствуйте. Делаю (точнее, пытаюсь делать) адаптивный дизайн для сайта. Встала задача сделать.
Вёрстка адаптивного меню
Подскажите пожалуйста, как сделать адаптивное меню такого плана, как на картинке.
Вёрстка адаптивного меню
Всем привет. Ребята, подскажите пожалуйста, как сделать чтобы блок в котором менюшка, увеличивался.
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
Сообщение было отмечено Fedor92 как решение
Решение
1 2 3 4 5 6 7 8 9 10
html,body,.wrapper{ height: 100%; width:100%; } .block{ display: inline-block; padding-left:10%; padding-bottom:10%; border:1px solid; }
1 2 3
div class="wrapper"> div class="block">/div> /div>