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

Question

How can I go about resizing/cropping an image so the height is constant but its width gets smaller as the page is resized?

The same effect as you can see in the carousel here:

http://dai.com/

Thanks,

Answer 1

Did you looked at the website image closely? Because it's not resizing! It's just centered in the middle of the img element as an background property. When you change the width of the screen you will see that the image center is adjusted..

It's pretty simple to accomplish this effect by using only the background property:

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

The background image will get the height of the element.

Example: here

Answer 2

you should bind a function to the "resize" event,
and give the image max-width and max-height instead of height and width,

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

 imageresize();

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

I attached a jsFiddle: http://jsfiddle.net/gGBRF/

Answer 3

正如@Sven所说，它并没有被调整大小，只是被居中并调整了浏览器的大小，使得它看起来像是从两边溢出。