center large image inside container but keeping aspect ratio

Question

I'm trying to replicate how the slider image works on http://www.hmv.com. if you shrink down the screen size the image as if zooms out but still keeps aspect ratio. You will understand when you shrink the screen down.

I have a container that is 739px tall and is 100% width wise.

I have created a jsfiddle for you guys to see what me code is.

//this is so i can add a jsfiddle link

sizeHeaderImg();

but when i shrink my screen down the image doesnt keep to a nice scale. my image size is 1920 x 1000

I am happy to use a plugin that could do this but if there is some thing that could point me in the right direction where my code is going wrong that would be very much appreciated

Thanks

Answer 1

I actually fixed this with this plugin:

//Scale and offset an image to fill its container
(function($) {
$.fn.scaleImageToFillParent = function(){
  //Scale and offset
  $(this).bind('reposition', function(){
  //Vars
  var $this = $(this);
  var $parent = $(this).parent();
  //Save natural width/height
  if(typeof($this.data('scaleImageToFillParentSetup')) == 'undefined') {
  $this.data('scaleImageToFillParentSetup', true);
  if ('naturalWidth' in (new Image)) {
  $this.data('naturalWidth', $this[0].naturalWidth);
  $this.data('naturalHeight', $this[0].naturalHeight);
  } else {
  var img = new Image;
  img.src = $this.attr('src');
  $this.data('naturalWidth', img.width);
  $this.data('naturalHeight', img.height);
  }
  $this.data('aspectRatio', $this.data('naturalWidth') / $this.data('naturalHeight'));
  $(this).css({
  maxWidth: 'none',
  minWidth: 0,
  maxHeight: 'none',
  minHeight: 0,
  position: 'absolute',
  top: 0,
  left: 0
  });
  $(this).addClass('active');
  //Emergency! Somebody didn't wait 'til the image had loaded!
  if(typeof($this.data('naturalWidth')) != 'number' || $this.data('naturalWidth') == 0) {$this.removeData('scaleImageToFillParentSetup');}
  }
  //Get dimensions of container
  var contWidth = $parent.width();
  var contHeight = $parent.height();
  var contRatio = contWidth / contHeight;
  var imgRatio = $(this).data('aspectRatio');
  if(imgRatio > contRatio) {
  //Fit so height 100%
  var newImgWidth = contHeight * imgRatio;
  $(this).css({
  width: newImgWidth,
  height: contHeight,
  marginTop: 0,
  marginLeft: (contWidth - newImgWidth) / 2,
  });
  } else {
  //Fit so width 100%
  var newImgHeight = contWidth / imgRatio;
  $(this).css({
  width: contWidth,
  height: newImgHeight,
  marginTop: (contHeight - newImgHeight) / 2,
  marginLeft: 0
  });
  }
  });
  $this = $(this);
  $(window).load(function(){$this.trigger('reposition');}).resize(function(){$this.trigger('reposition');});
  }
})(jQuery);

excuse the formatting

but you call it like this:

$('img.hero_image').scaleImageToFillParent();

Answer 2

You don't need any javascript to achieve this:

img {
    height: auto;
    max-width: 100%;
}

.hero-image {
    height: 739px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hero-image img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

http://jsfiddle.net/LwJ2C/2/