在CSS中，如何根据高度创建相对宽度？

Question

所以我有以下HTML代码：

<div class="box">
    <div class="square">
        <div class="aspect-ratio"></div>
    </div>
    <div class="label">Hello World</div>
</div>

CSS

.box
{
    position   : relative;
    width      : 100%;
    background : red;
}

.square
{
    position   : absolute;
    left       : 0px;
    top        : 0px;

    width      : auto; // Needs to contain square aspect ratio depending on the height.
    height     : 100%;

    background : blue;
}

.label
{
    padding   : 20px;
    font-size : 14px;
}