Как сделать Резиновый квадрат с контентом?
НО, так не нормально, потому что все работает так же как если бы я указывал раззмеры в vw/vh.
- Вопрос задан более трёх лет назад
- 5256 просмотров
Комментировать
Решения вопроса 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
Как вычисляется 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
Снова по порядку:
- Задаем position: relative; для нашего квадратного блока
- Весь контент оборачиваем в html-блок .content
- Позиционируем .content абсолютно
- Растягиваем .content на всю ширину и высоту блока .square
Так как .content спозиционирован абсолютно — контент, находящийся внутри не будет растягивать квадрат.
Как сделать резиновый квадратный DIV css?
Если позволяет поддержка браузерами, то можно так:
Я квадрат
Отслеживать
ответ дан 20 окт 2021 в 23:23
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака
либо дополнительная обертка для элемента либо жс
.container < width: 50%; >.container__wrapper < overflow: hidden; position: relative; width: 100%; padding-bottom: 100%; /* пропорции блока определяются здесь */ display: flex; justify-content: center; /* элемент центрируется */ >.container__content
Отслеживать
8,695 2 2 золотых знака 16 16 серебряных знаков 56 56 бронзовых знаков
ответ дан 18 авг 2017 в 13:09
Oleg Vasiliy Oleg Vasiliy
11 1 1 бронзовый знак
position: relative (А еще, например, можно absolute. тогда нам пофиг на родителя); width: 100%; height: 100%;
так ? Ну и вроде резиновый.
Отслеживать
ответ дан 12 дек 2011 в 18:32
Станислав Комар Станислав Комар
1,987 16 16 серебряных знаков 29 29 бронзовых знаков
так он же не квадратный будет.. стороны будут иметь отношение сторон экрана.. и мне нужно несколько таких квадратиков на странице
12 дек 2011 в 18:34
а, сорри 🙂 Тогда без JS — хз 🙂
12 дек 2011 в 18:38
Автор вопроса, почему отметил это сообщение как лучший? ниже есть гораздо лучшие ответы.
10 дек 2018 в 9:41
Как сделать резиновый квадратный DIV css?
Написать две строчки:
Отслеживать
ответ дан 29 янв 2021 в 16:10
Sevastopol’ Sevastopol’
28.2k 12 12 золотых знаков 76 76 серебряных знаков 143 143 бронзовых знака
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.9.3159
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Адаптивные круглые и другие пропорциональные блоки на 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; >