Как всем известно, что выставляя ширину и высоту, то здесь пользуемся свойствами width и height соответственно. Если говорить про высоту, то здесь больше зависит от того, что будет находится внутри, а точнее от содержимого.
Учитывая элемент переменной ширины, он будет гарантировать, что его высота остается пропорциональной в ответном режиме, то есть отношение ширины к высоте остается постоянным.
Постоянное соотношение ширины и высоты
HTML
Код
<div class="kedesamu-basupkin"></div>
CSS
Код
.kedesamu-basupkin {
background: #2f2d2d;
width: 50%;
}
.kedesamu-basupkin::before {
content: '';
padding-top: 100%;
float: left;
}
.kedesamu-basupkin::after {
content: '';
display: block;
clear: both;
}
Свойство padding-top на ::before выставляет высоту элемента равняться проценту от его ширины. 100% следовательно, что высота элемента всегда будет иметь 100% ширину, где создаем адаптивный квадрат.
Поддержка браузера: 100%
Демонстрация
