title: object-fit: get resulting dimensions
body: <p>When using the new CSS feature <code>object-fit</code>, how can I access the resulting dimensions that the browser has chosen by JavaScript?</p>
  
  <p>So let's assume <code>foo.jpg</code> is 100x200 pixels. The browser page / viewport is 400px wide and 300px high. Then given this CSS code:</p>
  
  <pre><code>img.foo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 25% 0;
  }
  </code></pre>
  
  <p>The browser would now show the image on the very top with correct aspect ration stretching to the very bottom on the second quarter from the left. This results in those image dimensions:</p>
  
  <ul>
  <li>width: 150px</li>
  <li>height: 300px</li>
  <li>left: 62.5px</li>
  <li>right: 212.5px</li>
  </ul>
  
  <p>So what JavaScript call (jQuery allowed) would give me those numbers that I've calculated manually?
  (Note: the CSS information themselves are not known by the JavaScript as the user could overwrite them and even add stuff like <code>min-width</code>)</p>
  
  <p>To play with the code I've created a fiddle: <a href="https://jsfiddle.net/sydeo244/" rel="noreferrer">https://jsfiddle.net/sydeo244/</a></p>