根据宽度调整div的高度（反比）

Question

我想创建一个带有页眉和页脚图像的响应式布局，应始终显示并使用整个宽度。这两者之间应该是内容，带有滚动条以防溢出。 问题是，由于我想使用图像作为横幅，这些图像的高度取决于宽度。此图片应清晰显示：illustration

我找到了各种基于CSS的解决方案，但他们要么假定横幅的固定大小高度，要么仅用于静态比例（例如http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio）。 CSS的calc（）函数也没有帮助，因为它不允许宽度和高度的组合。我知道我可以用JavaScript做到这一点，但我想知道如果没有它可以做到这一点吗？

编辑：示例HTML代码

<header>
  <img src="testheader.jpeg" />
</header>

<section>
  <div id="content">
    content
  </div>
</section>

<footer>
  <img src="testfooter.jpeg" />
</footer>

和css：

html, body {
  height: 100%;
  width: 100%;
}

#content {
  overflow-y: auto;
}

img {
  max-width: 100%;
}