title: Unable to fit an image inside div container
body: <p>I am trying to showcase the image inside the div container, but unable to insert an image inside the div tag.</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>* {
    margin:0;
    padding:0;
    background:#fff;
    box-sizing:border-box;
  }
  
  body {
    font-family: verdana;
  }
  
  section {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:1200px;
    height:400px;
    background:#fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display:flex;
  }
  
  
  .content {
    width: 55%;
    height:100%;
    padding: 2% 3%;
    text-align:justify;
    line-height:1.5em;
    font-size: 18px;
  }
  
  .image {
    width:45%;
    height:100%;
    background:url('https://i.postimg.cc/2S7fjBxD/cyberpunk-mockup.jpg') ;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="content"&gt;
      &lt;h1&gt;&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="image"&gt;&lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I will attach the codepen link below for output reference:
  I want the image to fit inside the right side of the div (class="image")</p>
  
  <p>link : <a href="https://codepen.io/subin_s/pen/oOKKoY?editors=1100" rel="noreferrer">https://codepen.io/subin_s/pen/oOKKoY?editors=1100</a></p>