垂直于视口调整内容的大小

Question

我正在创建一个页面以显示照片的放大视图。我希望页面在顶部显示页眉，在底部显示页脚，并在页眉和页脚之间的所有空间中填充照片的图像。这些照片尺寸各不相同，并且可能具有横向或纵向方向。我毫不费力地确定视口的宽度。如果页面仅包含图像而没有其他内容，则我这样做没有问题。尽管进行了搜索，阅读和反复试验，但我无法辨别如何垂直调整内容大小以符合该准则。例如：

<header>
    <h1>Some header stuff</h1>
    <p>Such as a navigation bar at the top of the viewport.</p>
</header>
<main>
    <h1>Image</h1>
    <p>An image that should fill up the space in between</p>
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
</main>
<footer>
    <h1>Some footer stuff</h1>
    <p>Such as a logo, link to privacy page etc.</p>
</footer>

也许这是不可能的。有什么想法吗？

Answer 1

header{
height:10vh;
}
footer{
height:10vh;
}
main{
height:65vh;
background:url("https://www.bing.com/th?id=ABT63B35E950543A69BB040AEFA5BFCA186A43A5798E5E9B96844F4CE0ED7176910&w=608&h=200&c=2&rs=1&pid=SANGAM") no-repeat center center fixed;
background-size:cover;
}

<header>
    <h1>Some header stuff</h1>
    <p>Such as a navigation bar at the top of the viewport.</p>
</header>
<main>
    
</main>
<footer>
    <h1>Some footer stuff</h1>
    <p>Such as a logo, link to privacy page etc.</p>
</footer>