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