集裝箱內的中心大圖像，但保持寬高比

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/