使子div内的图像占据父div的100％高度

Question

我努力解决这个问题并希望有人能提出一些建议：

• 我有一个父div，其高度未指定，因此可以通过其内容来确定。
• 然后我有两个孩子＆＃39;这个父div中的元素，但我只 想要其中一个来确定父div的高度。
• 另一个子div包含一个图像，此图像应该采用 100％的容器（其高度应基于 父div的高度 - 这是通过将height的值指定为：inherit。
来完成的

图片解释：

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

这是添加图片之前的代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是在添加图片之后：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我知道有一种方法可以将图像设置为背景图像，但我不想这样做，并且想知道它是否可以按照我的方式完成在上面尝试过。

希望有人可以提供帮助！

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;
}