jquery - 拉伸(stretch)图像以填充 div，但不倾斜

Question

我正在尝试拉伸(stretch)图像以适应 div。但是我希望它溢出以便填满整个 div。 div 随页面调整大小。我想要一个类似于 jQuery bgstretcher 插件 ( http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html ) 的效果，但我不能使用该插件，因为我已经将它用于页面上的背景图像，并且当您尝试激活多个实例时它似乎不起作用

所以我要问的是某种简单的 jQuery 函数，它可以调整图像大小以完全填充 overflow hidden 的 div，这样就没有间隙，但又不会扭曲图像。

编辑:

http://jsfiddle.net/R7UCZ/

这就是我所追求的，但我希望图像填满整个 div 而不倾斜。如果图像超出 div 一点，那很好，但我需要它随 div 调整大小，div 随页面调整大小，包括高度和宽度。

Answer 1

首先你需要获取图片的属性，看看哪个大，是高还是宽，然后在窗口调整大小后根据div的大小调整图片的大小，像这样:

  //this would load up initially, you will need this data for future processing


   div = $("div");
   imgsrc = div.find('img').attr('src');

   var img = new Image()
   img.onload = function(){
        imgw = img.width;
        imgh = img.height;

        //after its loaded and you got the size..
        //you need to call it the first time of course here and make it visible:

        resizeMyImg(imgw,imgh);
        div.find('img').show();

        //now you can use your resize function
        $(window).resize(function(){ resizeMyImg(imgw,imgh) });

        }
   img.src = imgsrc


   function resizeMyImg(w,h){     
      //the width is larger
      if (w > h) {
        //resize the image to the div
        div.find('img').width(div.innerWidth() + 'px').height('auto');
      }        
      else {
        // the height is larger or the same
        //resize the image to the div
        div.find('img').height(div.innerHeight() + 'px').width('auto');
      }

     }

您实际上可以在这里找到完整的解决方案: http://jsfiddle.net/CDywS/1