高さのCSSと同じ幅

Question

AngularJSを使用してWebアプリケーションを作成しようとしていますが、高さと同じ幅を表現しようとしているときに機能しません。

HTMLのCODE：

<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;