title: Clearing doubts about height: auto css property
body: <p>I know that the <code>height: auto</code> property sets the height depending upon its content's height. Currently my div has a background image. This div is part of a CSS grid whose width is dynamic (like 90% of the parent's width) and I am fixing the background-image with <code>background-size: contain</code> and <code>background-position: center</code>.</p>
  <p>So when I reduce the device width the image gets reduced along width and height due to setting the grid width to be dynamic, but the div's height doesn't get reduced. That's why I am trying to give that div a height of auto so the div's height will depend upon the background images height.</p>
  <p>Still, the background-image's height is getting reduced when I reduce the device width, but the div which holds the background-image that's height isn't getting reduced, so the overall grid's height is not reducing and my image with the grid looks ugly.</p>
  <p>Does background-image count as content of a div? If not, then how should I reduce the div's height corresponding to the background-image's height reduction upon the device width reduction so I can use fit-content for my grid rows?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class='wrapper'&gt;
   &lt;div class='first-content image-postion'&gt;&lt;/div&gt;
   &lt;div class='second-content image-position'&gt;&lt;/div&gt;
   &lt;div class='third-content image-position'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.wrapper{
   display: grid;
    width: 85%;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: repeat(2, fit-content(100px));
    grid-template-areas:
      &quot;first second&quot;
      &quot;third second&quot;;
    grid-gap: 10px;
    margin: 0 auto;
  }
  .first-content {
    background-image: url('');
    grid-area: first;
  }
  .second-overview {
     background-image: url('');
    grid-area: third;
  }
  .third-overview {
     background-image: url('');
    grid-area: second;
  }
  .image-position {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: auto;
  }
  </code></pre>