title: How do I scale this image to fit my header?
body: <p>My header only has a height of 108px</p>
  <p><a href="https://i.stack.imgur.com/yRTwX.png" rel="nofollow noreferrer">This is how big my header is</a></p>
  <p>But the image/logo I want to place is clearly bigger
  <a href="https://i.stack.imgur.com/HoIYf.png" rel="nofollow noreferrer">When I remove the height limit in my CSS, this is how it looks like </a></p>
  <p>how do I rescale my image to fit my header? I'm  new to html and css and trying to learn to code, thank you in advance!</p>
  <p><em><strong>this is my html and css</strong></em></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>header.top {
    background - color: #157bea;
    margin: 10px,10px, 0px, 10px;
    height: 108px;
  }
  
  img.logowhite {
    width: 100%;
    height: 100%;
    object-fit: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class = top&gt;
    &lt;div class = logowhite&gt;
      &lt;img src = images/logowhite.png&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>