css - flexbox 容器内灵活的图像大小

Question

我有一个带有图像和标题(堆叠)的 flexbox 布局。我希望图像占用所有可用的屏幕空间，减去标题下方所需的任何空间。每个图像 + 标题组合不得超过视口(viewport)高度的 100%。

问题:我正在努力寻找一种方法来使图像不超过可用空间的高度。 (换句话说，图像将大于可用区域，它需要按比例缩小以符合在我下面的代码示例中 100vh 上设置的 <section> 高度。

Example of desired look

图片空间以红色勾勒，标题空间以蓝色勾勒

Demo of problem

我添加了一个 max-height到 <img>这样你就可以看到想要的效果。 (删除 max-height 上的 <img> 以查看问题。)

最终我需要它像这样工作而不设置文字 max-height .实际上它应该是 max-height: calc(100vh - (height of caption)) ，但我正在尝试在没有 javascript 的情况下执行此操作。

Answer 1

来自之前的评论

要将 flex 子级保持在边界内并使用 % 中的最大尺寸，您需要使用 overflow:hidden;，以便浏览器可以计算这些尺寸，否则内容框可能会溢出。

例子:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

header {
  display: flex;
  justify-content: space-between;
  background: lightblue;
  padding: 1vmax;
}

section {
  flex: 1;
  overflow: hidden;
  /* the browser will calculate size */
  display: flex;
  flex-direction: column;
  align-items: center;
}

figure {
  padding: 1vmin;
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  /* the browser will calculate size */
}

img {
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  flex-shrink: 1;
  /* IE */
}

<header>
  <h1>Logo</h1>
  <nav>
    Link Link Link
  </nav>
</header>

<section>
  <figure>
    <img src="https://placekitten.com/1200/1200" />
  </figure>

  <aside>
    <strong>Lorem Ipsum #1</strong>
    <p>Vivamus a neque dui. Nunc tortor risus, mattis quis vulputate at, lacinia vel enim. Nam aliquet ipsum a mi malesuada, nec accumsan felis accumsan.</p>
  </aside>
</section>