Html 动态大小的图像

我正在尝试将响应图像添加到首页，扩展到页面的全宽。类似于许多滑块所做的，但我只有一个图像，所以滑块是多余的。我已经设置了一个div，将它的背景图像和背景大小设置为100%，这样就达到了宽度。我的问题是身高。我必须使用固定高度才能显示div。我试着将高度设置为“自动”，但没有得到图像。我试着用这个方法：

但我似乎无法正确缩放宽度。使用“固定高度”可以正常工作，直到浏览器窗口扩展到超过图像大小，然后开始关闭。关于如何使高度刻度和宽度一样动态变化，有什么想法吗？任何想法都将不胜感激

我的代码：

CSS:

HTML5：

<div class="banner"></div>

我使用的是bootstrap，但它位于容器外部，所以它不应该影响这段代码

编辑下面的代码笔：

---

您是否尝试过将html的高度设置为100%，然后将横幅的高度设置为100%？添加一个codepen演示来显示您的确切问题可能有助于更好地将您遇到的确切问题可视化

是的，这是我的第一个想法。将横幅高度设置为100%会使图像消失。我用代码笔链接更新了这个问题。谢谢你的帮助！在这种情况下，使用静态图像可能是最好的，我可能会回到这一点，但似乎有一个解决方案在回避我。我正在帮助一个设计专业的学生，她真的很想要那张动态的照片。谢谢你的帮助。

<div class="banner"></div>