title: Responsive object-fit: cover fix on Chrome
body: <p>I know there's others questions about this, but they are old and not updated with the browsers current support. And they not cover the Chrome particular problem with this.</p>
  
  <p>I want a video (I want to do that with image too, but here I'm using a video) occupying 100% the width of the window, but with the container having a limited, specified height. Maintaining video's aspect-ratio (which is very important).</p>
  
  <p>Basically, the <code>object-fit: cover</code> does the job fine here. And in Safari works perfectly, the video upscale/downscale <em>inside his container</em> maintaining aspect-ratio.</p>
  
  <p>In Chrome that happens too, but there's no respect for the height of the container. The element surpasses the height of his container and keep growing to the bottom according to the window's width.</p>
  
  <p><code>object-fit: fill</code> woks well in both browsers, but the problem here is obvious, the aspect-ratio is not respected, deforming the video/image/etc.</p>
  
  <p>Here's what I have:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;video preload autoplay loop poster="poster.jpg" id="bgvid"&gt;
      &lt;source src="image/video.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#bgvid {
    width: 100%;
    min-width: 100%;
    height: 445px;
    max-height: 445px;
    background-color: #f0f0f0;
    object-fit: cover; /* cover works perfectly on Safari */
  }
  </code></pre>
  
  <p>My question is, how can I make this work perfectly <em>respecting the container height</em> (or at least min-height or max-height), responsively in all browsers, keeping the element's aspect-ratio?</p>
  
  <hr>