Nested flexbox image with same size container div - html

Question

I am having issues with a nested flexbox container with an image inside of it. I need the image to maintain its 16x9 ratio always and would like the parent (or another div) to always be the exact size of the image, as I am using its coordinates to create a laser pointer feature and send it to other users.
I currently have the following Code:
#container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-height: 100%;
height: 100%;
width: 100%;
padding: 0 2rem 2rem;
}
#container > div {
position: relative;
max-height: 100%;
height: 100%;
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#container img {
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}
<div id="container">
<div id="inner">
<img src="https://dummyimage.com/1600x900/000000/fff">
</div>
</div>
The #inner div and image match size when the #container is wider than the image:
However, when the image is full width, the #inner div is taller than the image:
Removing the #inner height works for the smaller widths, however the image then blows out of the container as the screen gets wider:
I have also tried some other solutions, such as adding object-fit: contain; to the image, and using a ratio-class with a padding-top of 56.25%, but can't seem to get any of these solutions to be fully responsive.
Any ideas are much appreciated!

Answer 1

If I get the idea correctly should be like this.
html, body {
height: 100%;
}
body {
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
#inner {
display: flex;
align-items: center;
justify-content: center;
}
#inner img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<div id="inner">
<img src="https://dummyimage.com/1600x900/000000/fff">
</div>
</div>

Answer 2

Edit:
If you set your inner div as display inline block, it will always be the same size as the child image:
body{
margin: 0;
padding: 0;
box-sizing:border-box;
}
#container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
padding: 2rem;
box-sizing: border-box;
}
#container > div {
position: relative;
display: inline-block;
background: red;
font-size: 0;
box-sizing: border-box;
}
#container img {
height: auto;
width: 100%;
max-width: 100%;
display: block;
}
as in this example: https://jsfiddle.net/nzs21bem/
Is this what you are looking for?
You need to add some styles to your image so the ratio is preserved.
And display the image as a block element instead of the default inline style,
which has some padding to it.
.imgblock {
background: red;
margin: 30px;
}
.imgblock img {
width: 100%;
max-width: 100%;
}
.imgblock1 img {
display: block;
}
<div class="imgblock imgblock1">
<img src="https://dummyimage.com/1600x900/000000/fff">
</div>
That should make the parent the same size as the child image.
As you can see the difference in these 2 examples: https://jsfiddle.net/no1rqx6f/