Fit (contain) of unknown size to parent, keeping aspect ratio WITHOUT img-element having same w/h as parent

Question

Prelude:

I don't know if it's possible without JS or even at all. I strongly prefer a solution with css only (and html), ideally w/o inspecting the source file. If the question title can be improved, be my guest.

Problem:

I have:

• a container of fixed size, let's assume quadratic div of 200px x 200px
• I want to fit an img (more general any div) inside (centered) that uses the maximum possible amount of the container, w/o clipping and keeping aspect ratio
• the inner element is of unknown size (e.g. 17 x 35 or 66 x 33 or 317 x 21 or 45 x 277 or 700 x 300 or 400 x 310...)
• the gist: since the inner element has most likely not the same (1:1) aspect ratio, I want the larger dimension to match the parents dimension, but I want the other one to be smaller than the parent, keeping aspect ratio

-> No, this will NOT solve the problem:

img {
height: 100px;
width: 100px;
object-fit: contain;
}

because this will set both dimensions to the parent. This is unsuitable for example, if I want to round all 4 corners of the image using border-radius (since with that, all 4 corners are the same as the parent's corners, not the loaded picture's corners).

Since I don't know which dimension will be the one that should match the parents one I cannot decide which one to set to 100%.

If I don't use

height: 100px;
width: 100px;

at all, the image might be displayed too small (for small source dimensions) and not stretched.

The img element should ONLY be exactly as large as its displayed source (as in: if I give it an bg-color, the color will never be visible, since it will be behind the src) and it's larger dimension fit the parent (200px) and its smaller one being as large as necessary so the aspect of the src is kept.

This is the reason, why I wrote that a more general version that works for all divs (not only img) is maybe necessary here.

I searched quite some pages and experimented with nested flexboxes, but the problem is always the same, it will only ever work for 1 dimension or for one of the two

// W<H
// or
// W>H

cases of sources.

So my last resort would be to inspect the original src size with JS, but if it's possible I would like to avoid that.

[Edit]

Seems like this contanis the aforementioned solution with JS and the rest not that helpful:

Resizing image of unknown size and aspect ratio

Copy/Paste:

<style type="text/css">
    .image_box{
        width: 300px;
        height: 300px;
        background: #FF0;
    }
</style>
<div class="image_box">
    <img src="1.jpg"  id="imageid">
</div>
<script type="text/javascript">
    var img = document.getElementById('imageid'); 
    //or however you get a handle to the IMG
    var width = img.clientWidth;
    var height = img.clientHeight;
    //alert(width);
    //alert(height);
    if(width>height){
         img.style.width = '300px';
    }else{
        img.style.height = '300px';
    }
</script>

Thanks!