title: Getting the height of a background image resized using "background-size: contain"
body: <p>So I have an image gallery. Each image is a <code>background-image</code> that stretches across the entire page.</p>
  
  <p>To ensure that every image uses the maximum available width, I give it the following background-size:</p>
  
  <pre><code>background-size: 100% auto;
  </code></pre>
  
  <p>However, some of the images are taller than the available screen height. </p>
  
  <p>To make sure the image is visible in full (at least using scroll bars), I would need to give the <code>body</code> element the height of the resized background image. </p>
  
  <p>However, there seems to be no way to get hold of the resized background image's height in JavaScript.</p>
  
  <p>Is this true? Do I have to resort to normal image elements after all? </p>
  
  <p>There are many approaches to getting the size of a <em>static</em> background image, like <a href="https://stackoverflow.com/questions/5106243/how-do-i-get-background-image-size-in-jquery">How do I get background image size in jQuery?</a> but they obviously don't apply here.</p>