javascript - Jquery，按宽度调整图像大小保持恒定高度

Question

如何调整图像大小/裁剪图像以使高度恒定但随着页面大小调整其宽度变小？

与您在此处的轮播中看到的效果相同：

http://dai.com/

谢谢，

Answer 1

你仔细看网站图片了吗？因为它没有调整大小！img它只是作为background属性居中在元素的中间。当您更改屏幕宽度时，您会看到图像中心已调整..

background仅使用属性来完成此效果非常简单：

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

背景图像将获取元素的高度。

示例：这里

Answer 2

您应该将一个函数绑定到“resize”事件，
并给图像最大宽度和最大高度而不是高度和宽度，

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