Flexbox:缩小图像以适应

Question

Flexbox:缩小图像以适应

我正在尝试设计一个具有以下属性的页面,这些属性将用作数字标牌:

页面高度是视口高度(100vh),因此滚动是不可能的
页面排列成全宽行
除了最后一行之外的所有行都是静态的(具有预定义的内容)
最后一行(包含图像幻灯片)应填充视口中的剩余空间.

这是我到目前为止:

body {
  margin: 0;
}
div#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
div.red {
  height: 100px;
  background-color: red;
  flex: 0 0 auto;
}
div.blue {
  height: 150px;
  background-color: blue;
  flex: 0 0 auto;
}
div.green {
  background-color: green;
  flex: 0 1 auto;
}
img {
  max-height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<div id="container">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green">
    <img src="http://lorempixel.com/200/300/">
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/62qqnx3m/6/

显然这不起作用,因为flex没有缩小图像div到正确的大小.

我可以flex: 0 0 auto从前两个div中删除它,但之后它们会缩小.

如何强制绿色div/image准确占据剩余空间,不多也不少？

因此,如果提供更高的图像,它将更加缩小以适应.

如果图像小于可用空间,则应该只显示,背景div仍然填充可用空间.

看起来max-height:100%对此很好,但这也行不通.

此外,我已经看到了如何横向执行此操作的示例(我也需要,但我遇到的麻烦较少),但我无法弄清楚如何将其转换为垂直缩放.

Answer 1

Dek*_*kel 5

green您可以将块的位置设置为绝对relative，将图像的位置设置为绝对。还要确保green块的高度设置为 100%（以获取页面的其余高度）。

这应该可以解决问题：

body {
  margin: 0;
}

div#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

div.red {
  height: 100px;
  background-color: red;
  flex: 0 0 auto;
}

div.blue {
  height: 150px;
  background-color: blue;
  flex: 0 0 auto;
}

div.green {
  background-color: green;
  flex: 0 1 auto;
  position: relative;
  height: 100%;
}

img
{
  max-height: 100%;
  position: absolute;
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div id="container">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"><img src="http://lorempixel.com/200/300/"></div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，3 月前
查看次数：	2737 次
最近记录：	8 年，7 月前