Question

我在Google上搜索了很多，但是找不到很好的答案。

假定父元素有两个子元素：流体图像（宽度：其父元素的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元素，则高度将彼此不相交，这是因为：

流体图像很灵活，但基本上会根据其比例调整大小
具有文本内容的Fluid 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>

使父母身高达到绝对定位孩子的100％

1 个答案: