requestBackgroundScaleFactor

HTML

<div class='bg-container cover'></div>
<div class='bg-container contain'></div>
<div class='bg-container fit'></div>

CSS

.bg-container {
    float: left;
    width: 200px;
    height: 170px;
    margin-right: 20px;
    padding-top: 70px;
    box-sizing: border-box;
    
    text-align: center;
    font-size: 25px;
    border: 3px solid gray;
        
    background: url("http://www.webtexture.net/wp-content/uploads/2011/04/5GrungePaperBackground_banner_thumb03.jpg") center center no-repeat;
}

.contain { background-size: contain; }
.cover { background-size: cover; }
.fit { background-size: 100% 100%; }

JavaScript

$.fn.requestBackgroundScaleFactors = (function() {
  var bgi_re = /url\((.*)\)/g;
  function extractUrl(str) {
    bgi_re.lastIndex = 0;
    var res = bgi_re.exec(str);
    return res[1] || null;
  };
  return function(fn){
    var bgImageUrl = extractUrl(this.css('background-image'));
    if (bgImageUrl === null) {
      throw new Error('background-image is empty or can not be accessed');
    }
    var bgSize = this.css('background-size');
    var img = new Image();
    img.onload = (function(_this) {
      return function() {
        var x = _this.width() / img.width;
        var y = _this.height() / img.height;
        if (bgSize === 'contain') { 
          var min = Math.min(x, y);
          fn.call(_this, min, min, img);
        } else if (bgSize === 'cover') {
          var max = Math.max(x, y);
          fn.call(_this, max, max, img);
        } else {
          fn.call(_this, x, y, img);
        }
        
      };
    })(this);
    img.src = bgImageUrl;
  };
})();

function showFactors(main, cross) {
    this.html(main.toFixed(3) + ', ' + cross.toFixed(3));
}

$('.bg-container.cover').requestBackgroundScaleFactors(showFactors);
$('.bg-container.contain').requestBackgroundScaleFactors(showFactors);
$('.bg-container.fit').requestBackgroundScaleFactors(showFactors);