html - 使 parent 的高度达到绝对定位 child 的100%

Question

我在谷歌上搜索了很多，但没有找到好的答案。

假设父元素有两个子元素:流体图像(宽度:其父元素的 100%)和绝对 div 元素。如果我决定覆盖 div 以完全适应图像(当然，如果 div 没有太多内容来覆盖图像边界)我可以。示例:

*{
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container{
    position: relative;
    width: 30%;
    min-width: 250px;
}

img{
    display: block;
    width: 100%;
}

.caption{
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: rgba(0, 0, 150, .2);

    position: absolute;
    top: 0;

    width: 100%;
    height: 100%;
}
.caption .caption-text{margin: auto; text-align: center;}

<div class="container">
  <img src="https://via.placeholder.com/400x300"  alt="">
  <div class="caption">
    <div class="caption-text">
      <h3>Hello World</h3>
      <p>Some random text</p>
    </div>
  </div>
</div>

但除此之外，如果我决定将相同的流体图像绝对定位以覆盖 div 元素，高度将不会相互相遇，这是因为:

• 流体图像是灵活的，但它们基本上根据比例调整大小
• 具有文本内容的流动 div 元素根据其父尺寸调整大小

那么我应该如何让 parent 的高度正好是绝对定位的 child img 的 100% 高度呢？

谢谢

Answer 1

这不是它的工作原理。 position: absolute 从父流中移除。这实际上意味着:“它的 parent 表现得就像它没有 child 一样”。

因此，当您有两个要重叠的元素时，给其中之一指定 position:absolute(应该被父级忽略的那个)，然后保留应该调整父级大小的内容 未定位(或 position 值为 static 或 relative)(您将其留在流程中，从而允许其调整父级的大小)。

请参阅 this answer 以获得更详细的解释。

---

如果您想根据父级的当前内容调整图像大小，最好的办法是将其用作父级的 background-image。 background-size 允许它相应地调整大小( cover 、 contain 等...):

*{
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container{
    position: relative;
    width: 30%;
    min-width: 250px;
    background: url(https://via.placeholder.com/400x300) no-repeat center /cover;
}

.caption{
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: rgba(0, 0, 150, .2);
}
.caption .caption-text{margin: auto; text-align: center;}

<div class="container">
  <div class="caption">
    <div class="caption-text">
      <h3>Hello World</h3>
      <p>Some random text</p>
    </div>
  </div>
</div>

请注意，我从内容中删除了 position:absolute 我想调整父级的大小(因为我希望它调整父级的大小)。

显然，您仍然可以通过使用 <img> 标签并将其绝对定位并确保它显示在内容下方来实现相同的目的，但是 background 是为此目的而本地开发的，因此使用它更有意义。

对于踢球，这是 <img> 绝对定位的样子:

a) 包含:

*{
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container{
    position: relative;
    width: 30%;
    min-width: 250px;
}
.container .positioner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.positioner img {
  max-width: 100%;
  max-height: 100%;
}

.caption{
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: rgba(0, 0, 150, .2);
}
.caption .caption-text{margin: auto; text-align: center;}

<div class="container">
  <div class="positioner">
    <img src="https://via.placeholder.com/400x300">
  </div>
  <div class="caption">
    <div class="caption-text">
      <h3>Hello World</h3>
      <p>Some random text</p>
    </div>
  </div>
</div>

b) 封面:

*{
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container{
    position: relative;
    width: 30%;
    min-width: 250px;
}
.container .positioner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.positioner img {
  max-width: 100%;
}

.caption{
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: rgba(0, 0, 150, .2);
}
.caption .caption-text{margin: auto; text-align: center;}

<div class="container">
  <div class="positioner">
    <img src="https://via.placeholder.com/400x300">
  </div>
  <div class="caption">
    <div class="caption-text">
      <h3>Hello World</h3>
      <p>Some random text</p>
    </div>
  </div>
</div>