宽度与高度css相同

Question

我尝试使用AngularJS创建一个网络应用程序，但是当我尝试表示与高度相同的宽度时它不起作用。

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;