Question

I want to create a javascript/jquery function which will resize an img (while maintaining aspect ratio) of any set dimensions so that it fills a parent div (that has overflow:hidden set) of any set dimensions without gaps. The image should resize to parent along whatever dimension (width or height) has the greatest difference between itself and the parent, and then center along the other dimension.

this is how far I got so far:

$.each( $(".img_for_video_thumbnail"), function(index, value) {

  $("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(this).attr("src"))
    .load(function() {

      var pic_real_width, pic_real_height, width_difference, height_difference;

      var pic_real_width = this.width;   // Note: $(this).width() will not
      var pic_real_height = this.height; // work for in memory images.
      var parent_width = this.parent().width;
      var parent_height = this.parent().height;
      var width_difference = pic_real_width - parent_width;
      var height_difference = pic_real_height - parent_height;

      if ( width_difference >= height_difference ) {

        // Do something...but what?

      }
 });
});

I’m using Django with Google App Engine if that helps.

Answer 1

got it!

(edit i made a mistake and had to fix it)

http://jsfiddle.net/uuVeD/6/

Just see the functions for the button press for the resize child button.

Good luck coding