集装箱内的中心大图像，但保持宽高比

Question

我试图复制滑块图像如何工作http://www.hmv.com。如果缩小屏幕尺寸，则图像会缩小，但仍保持宽高比。当你缩小屏幕时，你会明白。

我有一个高度为739px，宽度为100％的容器。

我创建了一个jsfiddle为你们看我的代码是什么。

//这是这样我就可以添加一个链接的jsfiddle

sizeHeaderImg(); 

但是当我缩小我的屏幕缩小图像犯规保持一个不错的规模。我的图像尺寸为1920×1000

我很高兴地使用插件，可以做到这一点，但如果有一些东西可以点我在我的代码是哪里错了正确的方向，将是非常赞赏

感谢

Answer 1

我其实解决了这个问题的Wi日这个插件：

//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); 

借口格式

，但你这样称呼它：

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

Answer 2

你不需要任何JavaScript来实现这一目标：

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/