如何让图像填充 div 内的剩余空间？ [复制]
Posted
技术标签:
【中文标题】如何让图像填充 div 内的剩余空间？ [复制]【英文标题】：How to have image fill remaining space within a div? [duplicate] 【发布时间】：2020-05-29 19:54:23 【问题描述】：我有一个<div>，它占用了 60% 的窗口空间，它包含两个东西：
如何使用纯 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;
【参考方案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>【讨论】：
以上是关于如何让图像填充 div 内的剩余空间？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章