How can i give height of the child element (img) to parent element(section)?

Question

    <section class="banner container">
  <img
    src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4H4vB?ver=d252&q=0&m=8&h=600&w=1600&b=%23FFFFFFFF&l=f&x=0&y=0&s=1898&d=712&aim=true"
    alt=""
  />
  <div class="explanation">
  <h2>Xbox Game Pass Ultimate</h2>

In this code height of section looks as 0. But the height of img is 600px. How can i give the height of img to its parent element which is section?

As you can see in the picture section class="banner container" has no height.

Answer 1

Please provide more of your code. The code you provided is full of unclosed tags. i assume your code should look like this:

 <section class="banner container">
    <img
src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4H4vB?ver=d252&q=0&m=8&h=600&w=1600&b=%23FFFFFFFF&l=f&x=0&y=0&s=1898&d=712&aim=true"
alt=""/>
   <div class="explanation">
      <h2>Xbox Game Pass Ultimate</h2>
   </div>
</section>

If you build it like that the section has the height of its containing children (img tag + h2 tag)