title: How to make image or video fill entire container when dealing with sub-pixel rendering?
body: <p>It appears that some browsers, when rendering image or video media that is positioned and sized on the page using percentages, occasionally round the size of the media content (image or video) differently than they round the actual DOM element that contains them. We're not sure how to fix this. There are two variants: HTML5 video element, and div with a background image (set to "contain").</p>
  
  <p>My testing is on Chrome 64.0 on macOS Sierra, but we've had the same issue reported on Chrome on Windows. I've not yet tested other browsers.</p>
  
  <h2>Video Element</h2>
  
  <p>Here's an example of a very minimal test case that shows the issue. Resize the width of your browser until you see a red line beside the video, or the video overflowing its element (as shown in the screenshots below).</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>video {
    background-color: red;
    width: 32%;
    margin: 0 auto;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video controls src="http://vjs.zencdn.net/v/oceans.mp4"&gt;
  &lt;/video&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Or, as a codepen: <a href="https://codepen.io/jthomerson/pen/mXrpZr" rel="nofollow noreferrer">https://codepen.io/jthomerson/pen/mXrpZr</a></p>
  
  <p>Here are two variations of the error:</p>
  
  <p><a href="https://i.stack.imgur.com/E7W0G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E7W0G.png" alt="video renders slightly smaller than video element"></a>
  <a href="https://i.stack.imgur.com/R6PTc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R6PTc.png" alt="video renders slightly larger than video element"></a></p>
  
  <p>Is there a way to fix this? <a href="https://www.jwplayer.com/" rel="nofollow noreferrer">JW Player</a> appears to be working around this with some complex JS that's watching for all resize events and then adding dynamic transforms and positioning directly to the video element. Is there a simpler way? Or if that's the only way, is there a library out there where this has been standardized? (We are using <a href="https://github.com/videojs/video.js" rel="nofollow noreferrer">VideoJS</a>, but this isn't a problem specific to VideoJS).</p>
  
  <h2>Background Image</h2>
  
  <p>The same thing can happen with a div that is sized to be the exact same aspect ratio as your background image, and the background image uses <code>no-repeat</code> and <code>contain</code>.</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>.container {
    width: 60%;
    border: 1px solid blue;
    margin: 0 auto;
    padding: 1em;
  }
  .someBox {
    background-color: red;
    background-image: url('https://placebear.com/640/360');
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
    display: block;
    padding-top: 56.25%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="someBox"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Or, as a codepen: <a href="https://codepen.io/jthomerson/pen/xYEYZK" rel="nofollow noreferrer">https://codepen.io/jthomerson/pen/xYEYZK</a></p>
  
  <p>Here is an example of the error:</p>
  
  <p><a href="https://i.stack.imgur.com/fpWcm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fpWcm.png" alt="image renders slightly larger than the element it is background for"></a></p>
  
  <p>Of course, in this situation you might say "just change <code>contain</code> to <code>cover</code>, that's what it's made for". That's true, but in our actual usecase we are using a div with a background image as the poster image for a video when the video is not playing. However, we don't know the actual aspect ratio of the image. The video player itself is always sized to be 16:9, but in some cases our clients upload a poster image that is 1:1 (example: music video album art), or 4:3 or 2:1 (for legacy content where they don't have 16:9 content). So, we couldn't change <code>contain</code> to <code>cover</code> unless we were programmatically loading the image, detecting its size, and then if it's actually 16:9, use <code>cover</code>, otherwise use <code>contain</code>.</p>