Создание квадрата div с наследованием или sth? (нет js)

Question

Есть ли способ прочитать ширину и установить высоту с тем же значением? Я знаю трюк с viewportheight [vh] и [vm], но здесь это не сработает.

Answer 1

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

(я добавил немного парения анимацию, чтобы продемонстрировать, что изменение ширины также изменяет высоту)

.container { 
 
    position: relative; 
 
    width: 100px; 
 
} 
 

 
.container:hover { 
 
    width: 150px; 
 
    transition: width 2s; 
 
} 
 

 
.container::before { 
 
    display: block; 
 
    padding-bottom: 100%; 
 
    content: ''; 
 
} 
 
.content { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: red; 
 
}

<div class="container"> 
 
    <div class="content"> 
 

 
    </div> 
 
</div>