Question

我想制作一些带有一些描述性文字的图像查看器。问题是，带描述的下方框具有固定的高度，图像应填充其所在容器的剩余高度。

我想使用flexbox，因为我认为它似乎是最优雅和简单的解决方案（不使用JS）。这个代码和codepen用于我当前的工作，它似乎主要起作用：

html,  body,  #container {
    height: 100%
}
#container {
    display: flex;
    flex-direction: column;
}
#container > #image {
/* flex-grow: 1; */ /* not needed here? */
    max-width: 75%;
    background-color: #fcc;
    margin: 0 auto;
}
img {
     max-height: 100%;
    /* HERE IS WHERE MY PROBLEM STARTS!; */
     max-width: 100%;
}
#container > #text {
    flex-grow: 0;
    flex-shrink: 0;
    background-color: rgba(128, 128, 128, 0.7);
    padding: 5px;
    max-width: 75%;
    margin: 15px auto 0;
/*  TOP MARGIN DOESN'T WORK */
}

http://codepen.io/Kageetai/pen/AaCJy

我得到了大部分工作，但图片并没有调整自己的大小。正如您可以通过文本框的透明背景看到的那样，它会在包含div的边框上延伸，甚至在文本框的后面。那么如何在容器内保留具有正确宽高比的图像呢？

此外，在调整窗口大小时，margin: 0 auto;的居中似乎会出现问题。图像不再居中，页面需要刷新才能再次使用。

那么有谁知道如何使图像正常运行？：）

Answer 1

对于图像，您可以设置高度，边距和显示。

对于图像容器，给予2或3值flex，而不给其他值，因此它填充的空间与avalaible一样多。

<强> DEMO

使用的CSS：

html,
body,
#container {
  height: 100%
}

#container {
  display: flex;
  flex-direction: column;
}
#container > #text {
  background-color: #ccf;
  padding: 5px;
}
#container>#image {
  flex:3;
  display:flex;
}
img {
  width:auto;
  display:block;
  margin:auto;
  height:100%;
}

Answer 2

这是一个如何实现这一目标的更基本的演示。

<html style="height: 100%">
  <body style="height: 100%; margin: 0; display: flex; flex-direction: column">
    <p>Toolbar</p>
    <div style="background: #bbb; flex: 1">Image</div>
  </body>
</html>

可以在Codepen看到演示。

flexbox一个元素固定高度，其他填充

2 个答案: