如何让图像填充 div 内的剩余空间？ [复制]答案

【问题标题】：How to have image fill remaining space within a div? [duplicate]如何让图像填充 div 内的剩余空间？ [复制]
【发布时间】：2020-05-29 19:54:23
【问题描述】：

我有一个<div>，它占用了 60% 的窗口空间，它包含两个东西：

一个狭窄的标题行
我想占据 div 其余部分的图像。

如何使用纯 CSS（无 Javascript）来做到这一点？我一直在尝试一堆东西，没有运气。

这是我能得到的最接近的；图像潜入div.container 的绿色边框之外

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0px;
}
div.container {
  height: 60%;
  border: 2px solid green;
  box-sizing: border-box;
}
div.rest {
  height: 40%;
  border: 2px solid red;
  box-sizing: border-box;
}
div.img-container {
  height: 100%; /* this is wrong, but what do I do? */
}
div.img-container img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  opacity: 0.5;
}

<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>

这是我尝试使用flex，但失败了。

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0px;
}
div.container {
  height: 60%;
  border: 2px solid green;
  box-sizing: border-box;
  display: flex;
  flex-direction: column
}
div.rest {
  height: 40%;
  border: 2px solid red;
  box-sizing: border-box;
}
div.img-container {
  flex: 1;
}
div.header {
  flex: 0;
}
div.img-container img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  opacity: 0.5;
}

<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>

【问题讨论】：

您的 flex 尝试在容器上缺少 min-height: 0;

标签： html css flexbox

【解决方案1】：

如果您在 Chrome Inspector 中查看 div.img-container，您会发现问题所在 - img 元素正在完成其工作并填充其容器，但容器本身正在溢出。

发生这种情况是因为它被设置为height: 100% - 这就是说“使我的身高达到我父母身高的 100%”，但这并不意味着“填充剩余的空间”。浏览器只是读取元素父元素的计算高度，然后将其乘以您的 % 值 - 基本上，这都是绝对值。 You can see that the blue box is 100% as tall as the box outlined in green，但是因为它位于一行文本的下方，所以会溢出该文本的高度。

flex 可以用来解决这个问题，但是你可以通过使用calc 减去该文本的高度来快速修补这个问题。在您的示例中，它是 19px，我建议手动设置该文本元素容器的 height，以确保在边缘情况下不会中断。然后，.img-container 得到height: calc(100% - 19px)，它按预期工作。

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0px;
}
div.container {
  height: 60%;
  border: 2px solid green;
  box-sizing: border-box;
}
div.rest {
  height: 40%;
  border: 2px solid red;
  box-sizing: border-box;
}
div.img-container {
  height: 100%; /* this is wrong, but what do I do? */
}
div.img-container img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  opacity: 0.5;
}

/* 
  ADDED CODE BELOW
*/

/* optional, just to be safe */
.header {  
  height: 19px;
}

/* overrides .img-container from above */
.img-container {
  height: calc(100% - 19px) !important;
}

<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>

【讨论】：

如何使用 flex？我试过了，父元素有display: flex，子元素有flex: 1，但它似乎不起作用......我不知道为什么我似乎无法掌握flex。我事先不知道标题行的高度，所以calc() 对我来说似乎很可疑。
您需要将所有元素设置为display: flex，使用flex-direction: column，并以相对方式设置框的大小。 See this guide.
当您在考虑 CSS 中的“填充剩余空间”时，通常，您正在谈论的是一个灵活框，并且需要使用flex，除非您使用calc 破解它。
嗯，好的。出于某种原因，我无法理解其中的一些 CSS 概念，这很奇怪，因为我在 TeX 中得到了相应的概念，例如盒子和胶水以及 hfil 等等。
@jpetty 使用flex 为您写了一个示例！这是一个较新的标准，它仅适用于某些东西的固定像素大小可能会改变的情况。 Flex 可以让你做一些事情，比如“画两个盒子，一个是另一个的两倍大”或“填充剩余的空间”。它只是意味着“灵活”。

【解决方案2】：

如果您知道标题元素的高度，@Christian 的方法有效，但是您也可以使用flex。

这允许元素动态增长以填充剩余空间，因此您的标题可以是任何高度。

html,
body {
  height: 100%;
  overflow: hidden;
  margin: 0px;
}

div.container {
  height: 60%;
  border: 2px solid green;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

div.rest {
  height: 40%;
  border: 2px solid red;
  box-sizing: border-box;
}

div.img-container {
  flex: 1;
  position: relative;
}

div.img-container img {
  opacity: 0.5;
  height: 100%;
  position: absolute;
}

<html>

<body>
  <div class="container">
    <div class="header">hieronymus bosch last judgement</div>
    <div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
  </div>
  <div class="rest">
    <h1>blah blah blah</h1>
  </div>
</body>

</html>

【讨论】：

感谢您抽出宝贵时间编写一个 flex 示例！ =)
如果我为 img 添加了 max-width/max-height=100% width/height=auto，那么它正是我想要的！ codepen.io/jason-s/full/RwPrjGJ 但你能解释一下 img-container 和 img 需要相对/绝对吗？我只看到absolute 在您将某物放置在相对于其容器的固定位置并使用left: 10px 之类的东西将其锚定在其容器左侧附近时使用。
...如果我想将图像水平居中怎么办？
您希望图像填充容器的高度。这样做的一个好方法是将容器设置为position: relative;，将子图像设置为position: absolute; 和height: 100%;。这是强制子元素填充其父元素高度的一种方法。至于居中图像，您可以在 img-container 上设置 display: flex; 和 justify-content: center;。

【解决方案3】：

使用 Flex，您可以使用 flex 属性和溢出（或最小高度）。示例：

html, body {
  height: 100vh;
  margin: 0px;
  display:flex;
  flex-direction:column;  
}
div.container {
  flex:6;/* instead height:xx% */
  border: 2px solid green;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow:hidden; /* or min-height:0 if scroll is needed */
}
div.rest {
  flex:4;/* instead height:xx% */
  border: 2px solid red;
  box-sizing: border-box;
}
div.img-container {
  flex: 1;
  min-height:0; /* or overflow:hidden; */
}
div.header {
  min-height:1.6em; /* if you need something alike ?? */
}
div.img-container img {
  max-height: 100%; 
  opacity:0.5;
}

<html>
<body>
<div class="container">
<div class="header">hieronymus bosch last judgement</div>
<div class="img-container"><img src="https://i.imgur.com/TT6drhn.jpg"></div>
</div>
<div class="rest">
<h1>blah blah blah</h1>
</div>
</body>
</html>

【讨论】：