title: Force img height 100% of parent height
body: <p>Have this image inside a section which has to be forced to have the exact same height of the section height. I worked this out but it doesn't seems to work on resizing.</p>
  
  <p>Code I have</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;section id="header-bg"&gt;
      &lt;img src="images/background.png"&gt;
    &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>$header-bg-top: 80px;
  $header-bg-height: 620px;
  #header-bg {
    position: relative;
    top: $header-bg-top;
    max-height: $header-bg-height;
    overflow: hidden;
    border-bottom: 1px solid red;
      img {
        background: url(../images/background.png);
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
      }
    }
  </code></pre>
  
  <p>Result on full screen:
  <a href="https://i.stack.imgur.com/u8D72.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u8D72.png" alt="enter image description here"></a></p>
  
  <p>Result on resized screen:</p>
  
  <p><a href="https://i.stack.imgur.com/z8gGF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z8gGF.png" alt="enter image description here"></a></p>
  
  <p>I already found a lot on the internet, but this is not working out for me.</p>
  
  <p><a href="https://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height">CSS - Expand float child DIV height to parent&#39;s height</a></p>
  
  <p><a href="https://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh">How to Force Child Div to 100% of Parent&#39;s Div Without Specifying Parent&#39;s Height?</a></p>
  
  <p><a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks" rel="nofollow noreferrer">http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks</a></p>