将内容垂直调整到视口

Question

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

<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>

Answer 2

布局实际上是完全可行的，但需要对您的 HTML 进行一些微调。您需要将 <header>、<main> 和 <footer> 元素包装在包装器 div 中，该包装器设置为 display: flex; flex-direction: column，以便它们使用 CSS flexbox 执行 space-填充布局要求。

然后，在 <main> 元素中，使用相同的 CSS flexbox 技巧。但是，您应该用 <div> 包装 <img> 元素，它被设置为增长到任何可用的 space。

到目前为止，您的布局将如下所示：

<div class="wrapper">
  <header><!-- Header content --></header>
  <main>
    <!-- More content -->
    <div class="image">
      <img src="..." />
    </div>
  </main>
  <footer><!-- Footer content --></footer>
</div>

你的 <img> 元素然后被设置为绝对定位，完全覆盖其父元素 <div>，并利用 object-fit: cover 调整自身大小以填充所有 space同时保持纵横比。

这是一个概念验证示例。但是，您可能希望在整个页面上查看它（或检查此 JSFiddle），因为代码片段内联预览太小而无法演示布局：

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

header, footer {
  background-color: steelblue;
  color: #eee;
}

main {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.image {
  flex: 1 1 100%;
  position: relative;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
}

<div class="wrapper">
  <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>
      <div class="image">
        <img src="https://images.unsplash.com/photo-1586109803336-c02797ffdcc0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" />
      </div>
  </main>
  <footer>
      <h1>Some footer stuff</h1>
      <p>Such as a logo, link to privacy page etc.</p>
  </footer>
</div>

Answer 3

这是我结合了 Terry 的想法的解决方案：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    * {
      box-sizing: border-box;
    }
    
    html,
    body {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    
    header,
    footer {
      background-color: steelblue;
      color: #eee;
      padding-left: 2rem;
    }
    
    main {
      flex: 1 1 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding-left: 2rem;
    }
    
    .body-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .image-wrapper {
      flex: 1 1 100%;
      position: relative;
    }
    
    img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="body-wrapper">
    <header>
      <h1>Navigation Bar Goes Here</h1>
    </header>
    <main>
      <h1>Photo Caption Goes Here</h1>
      <div class="image-wrapper">
        <img src="https://images.unsplash.com/photo-1586109803336-c02797ffdcc0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Photo: Copy of Photo Captions Goes Here" />
      </div>
      <h2>The Album Caption Goes here</h2>
    </main>
    <footer>
      <h1>Footer Goes Here</h1>
    </footer>
  </div>
</body>

</html>

将内容垂直调整到视口

Size content vertically to viewport

html

css

viewport

image-resizing