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

时间:2019-07-15 20:31:42

标签: css flexbox

我有一个带图像和标题(堆叠)的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。

1 个答案:

答案 0 :(得分:0)

来自先前的评论

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