Та же ширина, что и высота css

Question

Я пытаюсь создать веб-приложение с помощью AngularJS, но когда я пытаюсь представить ту же ширину, что и высота, она не работает.

HTML КОД:

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left"> 
    <div id="controlPanel"> 
     <img src="" class="avatarImage"> 
    </div> 
</md-sidenav> 

CSS КОД:

div#controlPanel { 
    width: 100%; 
    height: 30%; 
    background-color: #333333; 
} 

img.avatarImage { 
    border: 1px red solid; 
    width: -----> SAME AS THE WIDTH <-----; 
    height: 75%; 
    border-radius: 50%; 
} 

Вот результат: IMAGE CLICK HERE: I want a square but putting vh or vw doesn't work

Спасибо за чтение этого, и я надеюсь, что у нас есть хороший ответ!

Answer 1

Вы можете использовать vh units. За этот документ:

Vh
1/100-ой высоты окна просмотра.

height:75%; 
width:75vh;