title: Scale background image of div to a fixed width; auto-scale height
body: <p>Similar to <a href="https://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion">CSS background image to fit width, height should auto-scale in proportion</a>, I want to scale an image to a fixed width, with an unlimited height.</p>
  
  <p>Unlike that question though, this is for a <code>&lt;div&gt;</code>, not the <code>&lt;body&gt;</code>, which seems to introduce issues.</p>
  
  <p>I've tried using the CSS3 property <code>background-size: cover</code>, but that shows 2 images like this (correct width but not tall enough):</p>
  
  <blockquote>
    <p><img src="https://i.stack.imgur.com/FJICS.png" alt=""></p>
  </blockquote>
  
  <p>I've also tried using <code>background-size: contain</code>, but that shows like this (not wide enough, therefore not tall enough):</p>
  
  <blockquote>
    <p><img src="https://i.stack.imgur.com/1Xw5z.png" alt=""></p>
  </blockquote>
  
  <p>I'm trying to get the images to look like this:</p>
  
  <blockquote>
    <p><img src="https://i.stack.imgur.com/S5PvW.png" alt=""></p>
  </blockquote>
  
  <p>Here's <a href="http://jsfiddle.net/vJAHz/" rel="nofollow noreferrer"><strong>a JSFiddle</strong></a> I've setup.</p>
  
  <p>How can I get the <code>&lt;div&gt;</code>'s to be <code>171px</code> wide, but also auto-scale the height?</p>
  
  <p>The dimensions of the images are not known. The images <em>must</em> come in the format <code>&lt;div style="background-image: url('base64')"&gt;</code>, (not <code>&lt;img src="base64"&gt;</code> - due to a restriction on the CLI program it is forwarded to) but I can modify any other HTML or CSS.</p>
  
  <hr>
  
  <p>I have also tried using JavaScript to calculate what the height should be. That works good, but the <code>&lt;div&gt;</code>'s are not actually resized at the end:</p>
  
  <pre><code>var divs = document.getElementsByTagName('div');
  for(var i = 0; i &lt; divs.length; i++)
  {
      var img = new Image();
      img.src = divs[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
      var ratio = img.width / 171;
      var height = Math.floor(img.height / ratio);
      alert(height);
      divs[i].height = height;
  }
  </code></pre>
  
  <p>Here's <a href="http://jsfiddle.net/vJAHz/4/" rel="nofollow noreferrer">an updated JSFiddle</a> with the JavaScript.</p>