如何使面板高度达到正方形，面板的宽度为50％？

Question

如何使用bootstrap panels制作4个完美的正方形？

width是正确的，但是如果我将高度设置为50%则没有任何反应。我不想用150px手动设置高度，例如因为根据屏幕尺寸，高度需要流畅地增大/缩小以匹配width。

查看

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

CSS

.panel-default {
    border-style: none;
    border: none;
    width: 49.5%;
    height: 49.5%;
    display: inline-block;
}

.panel-body {
    background-color: #446CB3;
    color: white;
    height: 50%;
    padding-top: 19%;
}