Question

我有一个带图像和标题（堆叠）的flexbox布局。我希望图像占用所有可用的屏幕空间，减去标题下方所需的任何空间。每个图像+字幕组合不得超过视口高度的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>

flexbox容器内的灵活图像大小调整

1 个答案: