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所说，它没有被重新调整大小，它只是居中并重新调整浏览器大小，使其看起来像是双方溢出。