Why does my image not respect the parent div size?

Question

I am trying to make a website section where I have some text to the side of an image, but my image stretches out the parent div instead of taking up 100% of the height like specified

In my understanding the height I specified in .more-info-section should be carried down to the child div .info-image-container and then carried down to the image, but when I add the image it stretches its parent .info-image-container, while the height of .more-info-section remains the same 30rem

.more-info-section {
  height: 30rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.info-image-container {
  height: 100%;
  width: 100%;
}

.info-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.info-info {
  overflow: auto;
}

<div class="more-info-section">
  <div class="info-image-container">
    <img class="info-image" src="Images/bag2.jpg">
  </div>
  <div class="info-info">
    <h1>The Header</h1>
    <p>text</p>
  </div>
</div>

If I also add height:30rem explicitly to .info-image-container then the image does scale down, but it doesn't crop like it should because of the object-fit:cover . So clearly I'm doing something wrong but for the life of me I cannot figure out what it is

Answer 1

So your image container is using 100% for the height and width. 100% is relative to its nearest ancestor, being the more-info-section where there is no width defined. You should set your image to height: 100%; and remove the width. Use max-width: 100%; instead so it resizes responsively and will fit in the 30rem container.

You can see now it fits in the container:

You can view the working version of that example here:

.more-info-section {
  height: 30rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.info-image-container {
  height: 100%;
  width: 100%;
}

.info-image {
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.info-info {
  overflow: auto;
}

<div class="more-info-section">
  <div class="info-image-container">
    <img class="info-image" src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="info-info">
    <h1>The Header</h1>
    <p>text</p>
  </div>
</div>

This second example shows that height: 100%; exceeds 30rem, and height: inherit; would be your solution for it to fill only the height of the parent.

.more-info-section {
  height: 30rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.info-image-container {
  /*height: 100%;*/
  height: inherit;
  width: 100%;
}

.info-image {
  max-width: 100%;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.info-info {
  overflow: auto;
}

<div class="more-info-section">
  <div class="info-image-container">
    <img class="info-image" src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="info-info">
    <h1>The Header</h1>
    <p>text</p>
  </div>
</div>