使父母身高达到绝对定位孩子的 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 元素根据其父尺寸调整大小

那么我应该如何让父母的身高正好是绝对定位的孩子 img 的 100% 身高？

感谢

Answer 1

这不是它的工作原理。 position: absolute 被从父母的流程中删除。这实际上意味着：“它的父级的行为就像它作为一个孩子没有它一样”。

所以，当你有两个想要重叠的元素时，你给其中一个 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>