[SOLVED] In CSS, maximize a child with given aspect ratio in parent

In CSS, maximize a child with given aspect ratio in parent

Here's what I want:

A container element with a single child
The container element has been given a width and a height
The child element has been given an aspect ratio
The child element should be as big as possible in the container element, but always maintaining its aspect ratio, and never be bigger than its parent
The child element should be position-able left/center/right and top/center/bottom in the container

The HTML code is easy:

<div class="container">
    <div class="child">I should keep my aspect ratio maximized!</div>
</div>

The CSS part is harder ^^' I tried solving it with grid, and my best attempt is this:

.container {
    
    height: 200px; /* Sample height. */
    width: 150px; /* Sample width. */
    background-color: yellow;
    
    overflow: auto; /* Just to make the container... */
    resize: both;   /* ...resizable for testing. */
    
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    align-items: center; /* Here I specify start/center/end. */
    justify-items: center; /* Here I specify start/center/end. */
    
}

.child{
    
    aspect-ratio: 3 / 2; /* Here I specify aspect ratio. */
    max-width: 100%;
    max-height: 100%;
    
    background-color: lime;
    
    overflow: auto;
    
}

<div class="container">
    <div class="child">I should keep my aspect ratio maximized!</div>
</div>

This works great for small container sizes, but once the child is wide enough to fit its text on a single line, it stops growing! And I can't find a way around that.

If it's possible to achieve what I want in HTML and CSS, I'm grateful if someone can help me, either by telling me how to turn my solution into a functional one, or by suggesting a new approach I can take.

Solution

Considering the fact that the width and height are known and defined you can rely on container query units (if it's not the case, ignore this answer)

.container {
    height: 200px; /* Sample height. */
    width: 150px; /* Sample width. */
    background-color: yellow;
    
    overflow: auto; /* Just to make the container... */
    resize: both;   /* ...resizable for testing. */
    
    display: flex;
    align-items: center; /* Here I specify start/center/end. */
    justify-content: center; /* Here I specify start/center/end. */
    container-type: size;
}

.child{
    --r: 3/2; /* Here I specify aspect ratio. */
    aspect-ratio: var(--r); 
    width: min(100cqw,100cqh*var(--r));
    
    background-color: lime;   
    overflow: auto;
}

<div class="container">
    <div class="child">I should keep my aspect ratio maximized!</div>
</div>