根据父元素，使子元素内的图像占据100%的高度

Question

我正在努力解决这个问题，希望有人能提供一些建议：

• 我有一个高度未指定的父级div，因此可以通过其内容来确定。
• 然后，在该父div内部有两个“子”元素，但我只想让其中一个决定父div的高度。
• 另一个子div包含一个图像，这个图像应占据其容器的100%的高度（其高度应基于父div的高度）- 这是通过将高度值指定为：inherit来实现的。

以下图片可进行说明：

我已经按计划完成了所有工作，但是一旦添加图像，它要么不能填满其容器的整个高度，要么会导致图像溢出，从而改变父div的高度（这不是我想要的）。

以下是添加图像之前的代码：

.parentDiv {
  width: 100%;
  background-color: grey;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.imageDiv {
  width: 50%;
  height: inherit;
  background-color: orange;
}
.contentDiv {
  width: 50%;
  background-color: lightgreen;
}
.contentDiv p {
  padding-left: 15px;
  padding-right: 15px;
}

<div class="parentDiv">

  <div class="imageDiv"></div>

  <div class="contentDiv">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

</div>

在添加图片后，页面的显示如下：

.parentDiv {
  width: 100%;
  background-color: grey;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.imageDiv {
  width: 50%;
  height: inherit;
  background-color: orange;
}
.imageContainer {
  width: 100%;
  height: 100%;
}

.imageContainer img {
  width: 100%;
  height: 100%;
  
  object-fit: cover;
}

.contentDiv {
  width: 50%;
  background-color: lightgreen;
}
.contentDiv p {
  padding-left: 15px;
  padding-right: 15px;
}

<div class="parentDiv">

  <div class="imageDiv">
  
    <div class="imageContainer">
      <img src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg">
    </div>
  
  </div>

  <div class="contentDiv">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

</div>

我知道一个解决方法是将图像设置为background-image，但我不想这样做，并想知道是否可以按照我上面尝试的方式完成。

希望有人能帮忙！

- bluguy

---

除非将其设置为背景：覆盖，否则它不会适合。 - steo

所以不能使用 <img src=""> 来实现吗？我正在使用 img 的替代方案：object-fit: cover; 它可以达到同样的效果。 - bluguy

据我所见，它将始终按比例在高度或宽度上进行调整，因此基本上不适合整个容器。此外，object-fit似乎不受IE和EDGE的支持。请小心：9 - steo

如果你想让它适应，背景是一个好方法... 背景不会改变DOM元素，因此您可以轻松地塑造父容器。而且，通过更多的技术，您甚至可以更好地实现这一点。 - Pimptech

@steo：啊，好的，谢谢。我得重新查看一下关于object-fit的支持。 - bluguy

@Pimptech：好吧，那真是遗憾！我需要为我想做的事情找到一个解决方法！谢谢你提供的信息 :) - bluguy

Answer 1

请尝试以下操作：

.parentDiv {
  width: 100%;
  height:300px;
  background-color: grey;
}
.imageDiv {
  width: 50%;
  height: inherit;
  background-color: orange;
  float:left;

}
.imageContainer {
  width: 100%;
  height: 100%;
}

.imageContainer img {
  width: 100%;
  min-height: 100%;
  }

.contentDiv {
  width: 50%;
  height:100%;
  float:left;
  background-color: lightgreen;
}
.contentDiv p {
  padding-left: 15px;
  padding-right: 15px;
}

- frnt

---

谢谢这个 frnt！有没有办法在保持 flex box 的情况下做到这一点？ - bluguy

欢迎 @bluguy。关于 flex 浏览器支持，您可以在 caniuse.com 上进行查询，但它不支持一些旧浏览器。当然，使用 flex 也有方法可以解决这个问题。 - frnt