Scale div width to an image width - html

Question

I've been trying to make a page in which there will be one image that needs to be the same height as the viewport while the width would stretch accordingly. The img needs to be centered.
Here's the tricky part (for me anyway): I would need to place a div at the bottom of that image which would have some buttons. I thought that it would be best if I can set the width of that div to be the same as the width of the img so that whenever the screen size changes, everything would stay at the same position.
Here is what I have so far in the HTML:
<div id="main_container">
<div class="exercises">
<img class="bg" src="image.png"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
So: height is always == viewport, width is variable.
I thought about placing a div as parent to the img, but I would still need to make that div somehow fit the size of its child (the image).
I've read some posts here, but none were too related to my issue.
edit:
I'm sorry if I wasn't clear enough. I've made an illustration of what the issue is. I hope this helps:

Answer 1

You can try this:
#main_container {
width:600px;
}
.exercises {
width: 100%;
}
.exercises img.bg {
max-width: 100%;
max-height: 100%;
object-fit:contain;
}
.footer .buttons {
width: 100%;
}
.buttons {
padding:0;
margin:0;
}
.buttons li {
width:100%;
height:50px;
border:1px solid #000;
list-style:none;
}
<div id="main_container">
<div class="exercises">
<img class="bg" src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
Obviously, edit the image URL to your own :)

Answer 2

Consider it a start. Change size of image in inspector and see what happens.
.exercises{background: silver; display: inline-block;}
img{ border: 1px solid black;}
ul{
margin: 0;
padding: 0;}
li{
float: left;
width: 33%;
background: #ccff00;
}
<div id="main_container">
<div class="exercises">
<img class="bg" src="https://www.techwibe.com/wp-content/uploads/2015/04/chrome_medium.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>

Answer 3

Try this one may help
<div id="main_container">
<div class="exercises">
<img class="bg" src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
<style>
#main_container{
/*Make the container follow the width of body*/
position:relative;
width:100%;
}
#exercises{
/*Make the this div follow the width of #main_container*/
width:100%;
}
.bg{
/*Make the the image follow the width of #exercises*/
width:100%;
height:auto;
}
.buttons{
/*modifying ul to the bottom position*/
position:absolute;
width:100%;
bottom:0;
}
.buttons li{
/*Style the button whatever you want*/
list-style:none;
margin:10px 2%;
padding:8px 12px;
background:orange;
width:20%;
color:white;
float:left;
}
</style>
Run code snippet to see the result

Answer 4

I apologize again if I've set the question in a vague manner. It was a bit complicated (for me) to formulate it. And thanks to the people who tried to help me with their solutions.
However, I decided to got with JQuery on this one and set the sizes dynamically.
This is the code with which I managed to set the width of the parent div the same size as the width of it's child img (after the img's height has been rescaled relative to the window height):
var imageResize = function () {
var screenHeight = $(window).height();
$('.bg').height(screenHeight);
var resizedImgWidth = $('.bg').width();
$('.exercises').width(resizedImgWidth);
}
$(window).resize(imageResize);
$(window).load(imageResize);
As always, anyone is welcome to give their two cents regarding my solution. (perhaps its very heavy and could be better optimized. I'm new at JS, so feel free :))