html - 使子 div 中的图像占据父 div 的 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>

我确实知道解决此问题的一种方法是将图像设置为背景图像，但我不想这样做，并且想知道是否可以按照我上面尝试的方式完成.

希望有人能帮忙!

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