Jquery，通过宽度保持恒定高度来调整图像大小

Question

如何调整大小/裁剪图像以使高度保持不变，但在调整页面大小时其宽度会变小？

与您在旋转木马中看到的效果相同：

http://dai.com/

谢谢，

Answer 1

您是否仔细查看过网站图片？因为它没有调整大小！它只是作为img属性位于background元素的中间。当您更改屏幕宽度时，您将看到图像中心已调整..

通过仅使用background属性来实现此效果非常简单：

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

背景图片将获得元素的高度。

示例：here

Answer 2

你应该将一个函数绑定到“resize”事件，并给出图像max-width和max-height而不是height和width，

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