Geek Answers Handbook

Make an image inside a child div takes up 100% of the height based on the parent div

I try my best to solve this problem and hope someone can offer some suggestions:

  • I have a parent div whose height is not specified, so it can be determined by its contents.
  • Then I have two children inside this parent div, but I only want one of them to determine the height of the parent div.
  • Another child div contains the image, and this image should take up to 100% of its container (the height of which should be based on the height of the parent div) - this is done by specifying the height value as: inherit.

Image for explanation: enter image description here

, , , , , , 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>
Hide result

:

.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>
Hide result

, , , , , .

, - !

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

More articles:


All Articles