我有一个带图像和标题(堆叠)的flexbox布局。我希望图像占用所有可用的屏幕空间,减去标题下方所需的任何空间。每个图像+字幕组合不得超过视口高度的100%。
问题:我正在努力寻找一种使图像不超过可用空间高度的方法。 (换句话说,图像将大于可用区域,并且需要缩小以遵守在下面的代码示例中在100vh
上设置的<section>
高度。
以红色概述的图像空间,以蓝色
概述的标题空间我在max-height
上添加了<img>
,因此您可以看到所需的效果。 (删除max-height
上的<img>
来解决问题。)
最终,我需要它无需设置文字max-height
就可以像这样工作。实际上,它应该是max-height: calc(100vh - (height of caption))
,但我正在尝试不使用javascript。
答案 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>