图像填充固定高度 div答案

【问题标题】：Image fill fixed height div图像填充固定高度 div
【发布时间】：2017-06-07 05:43:00
【问题描述】：

我遇到了css问题。

我有一个固定高度的 div，400px，在该 div 内有一些可变文本。还有一个图像，我需要图像来填充 div 的空间。文本会发生变化，因此空间总是不同的，并且都必须在高度范围内。

【问题讨论】：

请添加到目前为止您尝试过的代码示例。
好的，我将添加一些代码，但我可以告诉你我有具有高度值和显示的播放器。我尝试使用display: table，但是当内容长于400px 时，如果不是display: block，则容器会扩展
我为您制作了一个代码，这是解决您的问题的最简单方法检查此链接。现场演示：jsfiddle.net/Arsh_kalsi01/ckryvuzm/2

标签： html css height

【解决方案1】：

将 div 的 Width 定义为 100%，其中包含 400px 的高度和 display: flex 和 flex-direction: column。

在其中将 Image div 设置为 flex-grow: 1.

将所有内容放在一个 div 中，并设置为 overflow: auto，因为内容较少，因此不会滚动，如果内容变大，内容将获得滚动条。

这里做了一个小提琴，我认为它可以完全解决您的问题：https://jsfiddle.net/ABhimsaria/vj7bgzpb/2/

#container {
  position: relative;
  font-size: 20px;
  height: 400px;
  width:100%;
  border:1px solid black;
  height: 400px;
  display: flex;
  flex-flow: column;

}

【讨论】：

【解决方案2】：

我找到了一个解决方案，使用 display: flex 并在 div 的背景上设置图像。

您可以在此处查看代码：https://jsfiddle.net/ckryvuzm/

我尝试使用display: table，但400px 的固定高度会随着内容的变化而增长。

【讨论】：