image-resizer.js

var _imageResizerDeviation = 20,
  ImageResizer = {
    Initialize: function(i) {
      this.SetOptions(i);
      $(".wrappedImage").each(function(i, e) {
        var p = $(this).parent().closest("div.imageWrap");
        var t = $(p).width(),
          a = $(this).width(),
          n = _imageResizerDeviation / 100 * t;
        if (a > t - n) {
          $(this).css("width", t);
        } else {
          $(p).prepend('<div class="_imageResizerBackgroundDiv"></div>');
          var temp = p.first();
          console.log($(temp));
          $(temp).css('background', 'url("' + $(this).attr('src') + '")');
          $(temp).css('background-size', '1px');
          $(temp).css('background-repeat', 'repeat');
        }
      })
    },
    SetOptions: function(i) {
      null != i && (_imageResizerDeviation = null != i.deviation ? i.deviation : 0)
    }
  };

$(function() {
  ImageResizer.Initialize({
    deviation: 30
  });
});

index.html

<div class="imageWrap">
  <img class="wrappedImage" src="http://cdn.wallpapersafari.com/71/25/jeTcbX.jpg" />
</div>


<div class="imageWrap">
  <img class="wrappedImage" src="http://www.mobileswall.com/wp-content/uploads/2015/12/300-Merry-Christmas-Minions-l.jpg" />
</div>


<div class="imageWrap">
  <img class="wrappedImage" src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" />
</div>

style.css

.imageWrap {
  max-height: 100px;
  max-width: 200px;
  overflow: hidden;
  border: 1px solid #000;
  background-color: #fff;
}

.imageWrap img.wrappedImage {
  height: 100px;
  max-height: 100%;
  vertical-align: middle;
  display: block;
  margin-left: auto;
  margin-right: auto;
}