title: size an image to relative div
body: <p>Hello I have a question about how I make the image have the same height as the div. I tried changing the height to 100% without succes and making use of object-fit. Here I have a little bit of code. If you run the code block you see some text above an image and if you select the text you see it goes under the image. This is the part that is bugging me and stopping me from making progress. What I want to achieve is to let the image have the same height as the wrapper__content. For the ones who like, I will give a link to the jsfiddle: <a href="https://jsfiddle.net/remcoBaas99/pbrwuhn5/7/" rel="nofollow noreferrer">https://jsfiddle.net/remcoBaas99/pbrwuhn5/7/</a> . Also a quick notice: I recently changed the background-image and replaced it with the <code>&lt;img&gt;</code> element because of the alt text.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
      position: relative;
      overflow: hidden;
      color: #fff;
  }
  
  .wrapper__figure {
      position: absolute;
      margin: 0;
      z-index: -1;
  }
  
  .wrapper__content {
      display: flex;
      align-items: center;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
  }
  
  .inner {
      position: relative;
      margin: auto;
      padding-top: 40px;
  }
  
  img {
      height: auto;
      max-width: 100%;
      object-fit: cover;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="wrapper"&gt;
              &lt;figure class="wrapper__figure"&gt;
                  &lt;img src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"&gt;
              &lt;/figure&gt;
              &lt;div class="wrapper__content"&gt;
                  &lt;h2&gt;Test&lt;/h2&gt;
                  &lt;p&gt;Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
  
                      Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
                      
                      Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh.
                      
                      Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt.
                      
                      Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>