Html 将div宽度缩放为图像宽度

我一直在尝试制作一个页面，其中有一个图像需要与视口的高度相同，而宽度会相应地拉伸。img需要居中

这里有一个棘手的部分（对我来说）：我需要在图像的底部放置一个div，它会有一些按钮。我想，如果我能将div的宽度设置为与img的宽度相同，那么当屏幕大小改变时，所有内容都将保持在相同的位置，这将是最好的。 以下是我到目前为止在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>

重置
下一个
出动

所以：高度总是==视口，宽度是可变的。 我曾考虑将一个div作为img的父对象，但我仍然需要使该div以某种方式适合其子对象（图像）的大小。 我在这里读过一些帖子，但没有一篇与我的问题有太大关系

编辑： 如果我不够清楚，我很抱歉。我已经说明了问题所在。我希望这有助于： 您可以尝试以下方法：

#主容器{
宽度：600px；
}
.练习{
宽度：100%；
}
.练习img.bg{
最大宽度：100%；
最大高度：100%；
对象匹配：包含；
}
.页脚.按钮{
宽度：100%；
}
.按钮{
填充：0；
保证金：0；
}
李先生{
宽度：100%；
高度：50px；
边框：1px实心#000；
列表样式：无；
}

重置
下一个
出动

将其视为一个开始。在inspector中更改图像的大小，然后查看发生了什么

练习{背景：银色；显示：内联块；}
img{边框：1px纯黑；}
保险商实验室{
保证金：0；
填充：0；}
li{
浮动：左；
宽度：33%；
背景：#ccff00；
}

重置
下一个
出动

试试这个可能会有帮助

重置
下一个
出动

#主集装箱{
/*使容器跟随主体的宽度*/
位置：相对位置；
宽度：100%；
}
#练习{
/*使此div跟随#main_容器的宽度*/
宽度：100%；
}
.bg{
/*使图像跟随#练习的宽度*/
宽度：100%；
高度：自动；
}
.按钮{
/*将ul修改为底部位置*/
位置：绝对位置；
宽度：100%；
底部：0；
}
李先生{
/*你想怎么做就怎么做*/
列表样式：无；
利润率：10px2%；
填充：8px 12px；
背景：橙色；
宽度：20%；
颜色：白色；
浮动：左；
}

如果我以模糊的方式提出了这个问题，我再次道歉。（对我来说）表述起来有点复杂。感谢那些试图帮助我解决问题的人。 然而，我决定在这个问题上使用JQuery并动态设置大小。 这是我设法将父div的宽度设置为与其子img的宽度相同的代码（在img的高度相对于窗口高度重新缩放后）：

---

一如既往，欢迎任何人就我的解决方案付出他们的两分钱。（也许它很重，可以更好地优化。我是JS的新手，所以请放心：）

很难理解你想要什么。你能把你目前的进展显示出来吗，包括你的CSS作为一个代码笔/小提琴/代码片段。

 var imageResize = function () {
    var screenHeight = $(window).height();
    $('.bg').height(screenHeight);
    var resizedImgWidth = $('.bg').width();
    $('.exercises').width(resizedImgWidth);
  }

  $(window).resize(imageResize);
  $(window).load(imageResize);