I am attempting to create some rectangular boxes with circular (not ovular) boxes inside those. Currently the behaviour I'm getting is this:
Whereas the behaviour I was expecting was circles (i.e. 1:1 aspect ratio). My code for this is as follows:
#portals {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.portal {
display: flex;
justify-content: center;
width: 30%;
border-radius: 1rem;
background-color: aqua;
height:50rem;
margin:1rem
}
.portal-icon {
aspect-ratio: 1 / 1;
width:90%;
border-radius: 50%;
background-color: white;
margin:1rem
}```
<div id="portals">
<div class="portal" id="art" style="background-color: #ce87e8;">
<div class="portal-icon" id="art"></div>
</div>
<div class="portal" id="code" style="background-color: #87c8e8;">
<div class="portal-icon" id="code"></div>
</div>
<div class="portal" id="projects" style="background-color: #e89f87;">
<div class="portal-icon" id="projects"></div>
</div>
</div>在查看其他类似的问题时，我的印象是，aspect-ratio是使用现代浏览器实现这一目标的正确方法，但在我使用弹性框的过程中，它似乎并不适合我，一旦我交换回标准框，圆圈功能，但我无法让圆圈在框中居中.
我也读到过使用padding-bottom技巧的内容，但它根本没有任何效果.除此之外，我还读过一些答案，指出在该属性中使用百分比不起作用，也不应该使用，或者它已经过时，应该使用aspect ratio.
基本上我不知道该怎么办，因为似乎只有两种可用的方法相互矛盾(从我所看到的)，而应该使用的方法，但这两种方法都不适合我.
我还看到一些人提到可以使用JS实现这种行为，但我对此的经验为0，所以如果我能指出正确的方向，说明如果CSS不可能，我应该如何编写脚本来实现这一目标，那就太好了.
提前感谢.