Как сделать ширину равной высоте css

.section < width: 100%; display: flex; &-wrapper < background-color: #ff9595; height: 500px; flex: 50%; display: flex; &-left < background-color: #824caf; flex: 180px; >&-right < background-color: #841919; flex: calc(100% - 180px); >> > .item-responsive < padding-top: 100%; /* (1:1)*100% */ position: relative; background-color: #a7db81; &:before < display: block; content: ""; width: 100%; >& > * < position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #3e6132; >> 

Отслеживать

задан 20 окт 2021 в 22:13

Unicode101 Unicode101

25 1 1 серебряный знак 6 6 бронзовых знаков

А может всё-таки так? ru.stackoverflow.com/a/450697/178988

20 окт 2021 в 23:21

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Хак с отступом вполне рабочий. Думаю, что достаточно заменить высоту родителя с height на min-height и нужное поведение будет достигнуто:

.section < display: flex; width: 100%; >.section-wrapper < display: flex; /* height: 500px; */ min-height: 500px; flex: 50%; background-color: #ff9595; >.section-wrapper-left < flex: 180px; background-color: #824caf; >.section-wrapper-right < flex: calc(100% - 180px); background-color: #841919; >.item-responsive < position: relative; padding-top: 100%; /* (1:1)*100% */ background-color: #a7db81; >.item-responsive::before < content: ""; display: block; width: 100%; >.item-responsive > *

 
 
Левый
 
Правый 
Контейнер
 
 
 
 
 
Нижние блоки, на которые наползает абсолютно спозиционированный контейнер

Как с css сделать высоту блока равной его ширине при том что точное значение ширины не известно?

Ширина блока задана как «width: 100%», то есть 100% от родительского блока. Как задать высоту блока в процентах не от родителя а от своей же ширины?

94731 / 64177 / 26122

Регистрация: 12.04.2006

Сообщений: 116,782

Ответы с готовыми решениями:

Как сделать высоту равной ширине при ширине 100%?
как можно сделать элемент(например таблицу) квадратным, т.е. высота равна ширине(ширина 100%)

Как сделать высоту блока равной высоте экрана?
Пробую делать height:100%, но как я понял, блок наследовать эти 100% начинает от родителя. Как мне.

Как сделать нормальный фон по ширине при сужении длины в css
как сделать чтобы по ширине при сужении экрана не было белого фона, а было заполнение картинкой.

Как ширину одного из столбцов поля со списком сделать равной ширине столбца формы?
Здравствуйте! Подскажите пожалуйста, как ширину одного из столбцов поля со списком сделать равной.

Регистрация: 21.07.2018

Сообщений: 142

Вот пример(если я правильно понял):

1 2 3

div class="wrapper"> div class="block">/div> /div>

1 2 3 4 5 6 7 8 9

.wrapper{ width: 500px; } .block { width: 100%; background: red; padding-top: 50%; padding-bottom: 50%; }

511 / 485 / 161

Регистрация: 08.07.2013

Сообщений: 1,714

Записей в блоге: 1

1 2 3 4 5 6 7

div class="wrapper"> div class="block"> div class="inner"> div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus explicabo architecto hic, repellat adipisci facere asperiores, soluta commodi consequuntur voluptatibus, sequi minus ullam inventore, pariatur ipsam velit nostrum voluptates! Error!/div> /div> /div> /div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.wrapper{ max-width: 600px; } .block { width: 100%; background:green; outline: 3px solid black; } .inner { position: relative; height: 0; border: none; padding-top: 50%; } .content { padding: 10px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: orange; }

Как задать ширину div равной его высоте?

Видел информацию как задать высоту равной ширине, но мне надо наоборот.
Суть: есть блок с динамической высотой (например 25% от высоты экрана) надо что-бы его ширина в пикселях была равна этой высоте. Получившийся блок обязательно должен оставлять реальные размеры в потоке страницы, т.е. влиял на позиционирование других блоков.

• Вопрос задан более трёх лет назад
• 169 просмотров

1 комментарий

Средний 1 комментарий

WapSter @wapster92 Куратор тега CSS
При помощи css этого не сделать без костылей (на сколько я знаю).

$(function()< $('.some_block').height($('.some_block').width()); $(window).resize(function()< $('.some_block').height($('.some_block').width()); >); >);

код стыбрен из вопроса Как поставить высоту блока div в зависимость от ширины? Хорошо бы тебе поиском научиться пользоваться)

Решения вопроса 1

Если размеры зависят от экрана — просто используйте единицы измерения в vh или vw:

Если же размеры зависит от родителя, то тут придётся использовать трюк с canvas(или прозрачной гифкой — если по классике):

Как задать ширину элемента, равную его высоты в CSS?

Мне нужно, чтобы у box__child была ширина, равная высоте, т.е. 50px, a не 300px. Можно ли как-то сделать без использования js? Гуглил, ничего не помогает
Вариант просто прописать width: 50px; не нужен. Мне надо именно от высоты задать ширину.

• Вопрос задан более трёх лет назад
• 577 просмотров

3 комментария

Простой 3 комментария