title: Using object-fit: cover; doesn’t always yield the expected result in a container with an aspect ratio
body: <p>I’m trying to use <code>object-fit</code> and <code>object-position</code> on an <code>&lt;img /&gt;</code> element inside of a container with a specific aspect ratio. There are a lot of ways to approach applying an aspect-ratio to an element with CSS. The padding trick is the most popular, but I don’t want to use <code>position: absolute;</code> on the child image because I need the image to be smarter about its position and sizing. I basically need to emulate <code>background-size: cover;</code> with an <code>&lt;img /&gt;</code> element that isn’t a background image. I could use <code>aspect-ratio</code>, but it’s barely supported.</p>
  <p>I found <a href="https://codepen.io/noamr/pen/mpamVN" rel="nofollow noreferrer">this really interesting technique</a> for applying an aspect ratio to an element and it works for the most part. You can manipulate the aspect ratio by tweaking the <code>viewBox</code> values in the SVG. I’ve applied several aspect ratios to the <code>&lt;picture /&gt;</code> and most work. <code>&lt;svg viewBox=&quot;0 0 1 1&quot; /&gt;</code> clips the right and left sides of the child image as expected. <code>&lt;svg viewBox=&quot;0 0 3 2&quot; /&gt;</code> shows the entire image, uncropped. Cool.</p>
  <p>However, when I use something like <code>&lt;svg viewBox=&quot;0 0 3 1&quot; /&gt;</code> the SVG is sized correctly, but the <code>&lt;picture /&gt;</code> size isn’t correct, and the <code>&lt;img /&gt;</code> isn’t being cropped at the top and bottom as expected.</p>
  <p>Any idea why?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Picture {
    box-shadow: 0 0 0 10px red;
    display: grid;
    overflow: hidden;
    width: 50vw;
  }
  
  .Picture &gt; * {
    grid-area: 1 / 1 / 2 / 2;
  }
  
  .Img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;picture class="Picture"&gt;
    &lt;svg viewBox="0 0 3 1" /&gt;
    &lt;source media="(min-width: 1600px)" srcset="http://res.cloudinary.com/fringe/image/upload/f_auto/samples/people/bicycle.jpg"&gt;
    &lt;source media="(min-width: 800px)" srcset="http://res.cloudinary.com/fringe/image/upload/f_auto/test/1950-1300.jpg"&gt;
    &lt;img src="http://res.cloudinary.com/fringe/image/upload/f_auto/test/1950-1300.jpg" class="Img"&gt;
  &lt;/picture&gt;</code></pre>
  </div>
  </div>
  </p>