Question

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

页面高度是视口高度（100vh），因此无法滚动
页面排列为全行
除了最后一行之外的所有行都是静态的（具有预定义的内容）
最后一行（包含图片幻灯片）应填充视口中的剩余空间。

这是我到目前为止所做的：

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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

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

我可以从前两个div中删除flex: 0 0 auto，但之后会缩小。

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

因此，如果提供更高的图像，它会缩小甚至更适合。

如果图像比可用空间小，它应该只显示，背景div仍然填充可用空间。

似乎max-height:100%对此很有用，但这也行不通。

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

Answer 1

您可以将green块的位置设置为relative，将图像的位置设置为绝对值。还要确保green块的高度设置为100％（以占据页面的其余部分）。

这应解决问题：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

所以我们知道的是：

页面高度为100vh
第一行是静态的（height: 100px）
第二行是静态的（height: 150px）
包含图片的第三行应填充剩余高度

我认为解决方案在于基础数学：

100vh - 100px - 150px = height of third row

而不是代码中的这个：

div.green {
    background-color: green;
    flex: 0 1 auto;
}

img {
    max-height: 100%;
}

试试这个：

div.green {
    background-color: green;
    flex: 1 1 auto;
}

img {
    height: calc(100vh - 250px);
}

＆＃13;

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%;
}
*/

div.green {
  background-color: green;
  flex: 1 1 auto;
}
img {
  height: calc(100vh - 250px);
}

＆＃13;

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

＆＃13;

CRAN

Answer 3

我只需更改img类并添加到类.green min-height：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;
   min-height: 100%;
}

.green img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  height: auto;
}

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

Answer 4

试试这个小提琴：https://jsfiddle.net/ez4pf8wp/

将此添加到img类：

img {
   max-height: 100%;
   height: 100%;
   display: block;
   margin: 0;
}

Flexbox：缩小图片以适合

4 个答案: