html - 如何使 div 适合更大的 div 但保持它们的大小比例？

Question

我正在使用 HTML、CSS 和 Javascript 构建 gem 棋游戏的图形方面(尽管 JS 与此问题无关)。我设法搭建了棋盘，但我的老师想要这个游戏，这样玩家就可以输入他们想要的 3 到 7 个洞的数量。我的问题是，当我移除或添加洞时，洞看起来很奇怪(我希望它们是圆圈!)。

https://jsfiddle.net/kxdetz12/

<h1 style="text-align:center;">
    Mancala
</h1>
<div class="board">
    <div class='player1name'>  Player 1 </div>

    <div class="containerStore">
        <div class="storep1">
            <div class="label">
                0
            </div>
        </div>
    </div>
    <div class="containerStore">
        <div class="storep2">
            <div class="label">
                0
            </div>
        </div>
    </div>

    <div class="row">

        <div class="pit">
        </div>
        <div class="pit">
        </div>
        <div class="pit">
        </div>
        <div class="pit">  </div>
        <div class="pit">  </div>
        <div class="pit">  </div>
    </div>

    <div class="row">
        <div class="pit">  </div>
        <div class="pit">  </div>
        <div class="pit">  </div>
        <div class="pit">  </div>
        <div class="pit">  </div>

    </div>
    <div class='player2name'> Player 2 </div>
</div>

Answer 1

我想我明白了......

我从坑中去掉了固定的宽度和高度。然后使用 css 在每个 .pit 中插入一个 block 。令人惊讶的是，padding-top 与元素的宽度有关。

这是在响应式元素上保持纵横比的便捷技巧。

.pit {
    position: relative;
    display: flex;
    flex-grow: 1;
    background-color: rgba(255, 169, 77, 0.7);
    text-align: center;
    color: aliceblue;
    margin: 5px; 
    border: 5px;
    border-radius: 100px; 
    border-style: inset; 
    border-color: saddlebrown;
}

.pit:before {
  content: '';
  display: block;
  padding-top: 100%;
}

更新 fiddle :https://jsfiddle.net/3q5ctjw0/