title: background-size contain, but don't scale up
body: <p>I set my background image to <code>contain</code>:</p>
  
  <pre class="lang-css prettyprint-override"><code>.el {
      background: url(path/to/img.jpg) no-repeat center center;
      background-size: contain;
  }
  </code></pre>
  
  <p>But that scales the image up. I want the image to never be bigger than its native dimensions, and only scale down when it won't fit at its native resolution.</p>
  
  <p>Here's a demo: <a href="http://jsfiddle.net/6W3yh/" rel="noreferrer">http://jsfiddle.net/6W3yh/</a></p>
  
  <hr>
  
  <p><strong>I'm looking for a solution in CSS only.<br>
  No JavaScript please.</strong></p>