Question

What is the best way to simulate upcoming CSS3 object-fit property using CSS2 & JS? I’m interested in contain & cover methods for fitting.

EDIT: In CSS3 there is the new object-fit mechanism described here: http://dev.opera.com/articles/view/css3-object-fit-object-position/ but object-fit is not yet supported outside the Opera browsers. To create a portable solution I need to make an img grow or shrink to the size of its parent div without loosing the original aspect ratio of the image. This can be achieved by either containing the whole image (technique also called letterboxing) or by enlarging & overflowing the image until the smallest dimension matches the div‘s dimension (technique also called as cover). There are a few jquery imagefit libraries out there by they are very buggy (perhaps they work only in a specific situation on a specific browser).

EDIT 2: This question has been understood by those taking the time to read it, a good answer has been suggested and an answer has been given. It is difficult to understand the decision of closing it.

Answer 1

For anyone interested, here’s the actual working solution:

JSFiddle Demo

and the actual code:

(function($) {
  $.fn.imagefit = function(contain) {
    this.each( function() {
      var $this           = $(this),
          $wrapper        = $this.parent(),
          wrapper_width   = $wrapper.width(),
          wrapper_height  = $wrapper.height(),
          wrapper_ratio,
          image_ratio;


        // ratios
      image_ratio   = $this.width() / $this.height();
      wrapper_ratio = wrapper_width / wrapper_height;

      var ratio_cond = wrapper_ratio > image_ratio;
        if(contain) {
            ratio_cond = !ratio_cond;
        }

      if ( ratio_cond ) {
          $wrapper.css({
            'background'  : 'url('+$this.get(0).src+')',
            'background-size'  : '100% auto',
            'background-position'  : '0px 50%',
            'background-repeat'  : 'no-repeat'
          });
      } else {
          $wrapper.css({
            'background'  : 'url('+$this.get(0).src+')',
            'background-size'  : 'auto 100%',
            'background-position'  : '50% 0px',
            'background-repeat'  : 'no-repeat'
          });
      }

      $this.remove();

    });
    return this;
  };

  $('div.bgthumb#cover > img').imagefit(false);               
  $('div.bgthumb#contain > img').imagefit(true);               

}(jQuery));​

@Hippocrates: Thanks a lot for pointing me in the right direction.