Jquery，通過保持高度不變的寬度來調整圖像大小

Question

如何調整大小/裁剪圖像的大小，使高度保持不變，但頁面大小調整後寬度會變小？

同樣的效果，你可以在這裏看到旋轉木馬：

http://dai.com/

感謝，

Answer 1

你有沒有看仔細了網站的形象？因爲它不是調整大小！它只集中在img元素的中間，作爲background屬性。當你改變，你會看到圖像中心調整屏幕的寬度..

這是非常簡單的只使用background屬性來實現這種效果：

background: url("img path") 50% 0 no-repeat;

背景圖像將獲取元素的高度。

例子：here

Answer 2

你應該函數綁定到「調整」事件，
並給圖像最大寬度和最大高度，而不是高度和寬度，

function imageresize() { 
if (($(window).width()) < '800'){ 
$('#img').css('max-width',$(window).width()); 
} else { 
$('#img').css('max-width',''); 
} 
} 

imageresize(); 

$(window).resize(function(){ 
imageresize(); 
}); 

我附上一個jsFiddle：http://jsfiddle.net/gGBRF/

Answer 3

正如@Sven所說，它沒有被重新調整大小，它只是居中並重新調整瀏覽器大小，使其看起來像是雙方溢出。