Creating a 1:1 ratio element, centered within another element

April 28, 2024

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>

I was under the impression, looking at other similar questions, that aspect-ratio was the correct way of achieving this using modern browsers, but it doesn’t seem to function for me all the while I’m using flex boxes, as soon as I swap back to standard boxes the circles function, but I’m then unable to get the circles centered in the boxes.

I have also read about using the padding-bottom trick, but it doesn’t have any effect at all. On top of this, I have read some answers stating that using percentages in that property do not function and should not be used, or that it is antiquated and aspect ratio should be used instead.

Basically I’m at a loss for what to do because seemingly the only two available methods contradict each other (from what I can see) on which should be used, yet neither of them are working for me.

I have also seen some mentions of it being possible to achieve this behaviour using JS, however I have 0 experience with this, so if I could be pointed in the right direction on how I might go about writing a script to do that should CSS not be possible, that would be great.

Thank you in advance.

>Solution :

You need to alter the align-items from the default stretch to center or any other value as required.

#portals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.portal {
    display: flex;
    justify-content: center;
    align-items: start;
    width: 30%;
    border-radius: 1rem;
    background-color: aqua;
    height:25rem; /* adjusted for demo */
    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>