title: Using CSS object-fit:contain on image leaves blank spaces around it
body: <p>I have a container <code>image-wrapper</code> and an image inside it.</p>
  <p>The container has a fixed height and width. Inside it, the image resolution will be dynamic.</p>
  <p>All I am trying to do is to center the image to the container, horizontally and vertically and apply some <code>box-shadow</code> styling to it.</p>
  <p>But it leaves a blank space around the image, and it looks weird. Below is the code. It happens same with a vertical image.</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>.image-wrapper {
    height: 400px;
    width: 400px;
    background-color: rgb(0,200,100);
    padding: 40px;
  }
  
  .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-shadow: 10px 10px 10px red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="image-wrapper"&gt;
    &lt;img src="https://via.placeholder.com/500x200"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want to have a shadow around the image only, without the spaces. I think I am missing a very simple thing here.</p>
  <p>I have tried to add <code>position: relative</code> to the container, but it didn't work.</p>
  <p>I tried to search about it by searching something like &quot;<strong>css object fit image shadow</strong>&quot;, &quot;<strong>css object fit on image adds spaces</strong>&quot; and didn't found anything similar to it.</p>