8

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

所以我要的是某种简单的 jQuery 函数，它可以调整图像的大小以完全填充隐藏溢出的 div，这样就没有间隙，但不会倾斜图像。

编辑：

http://jsfiddle.net/R7UCZ/

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

4

4 回答 4

9

首先需要获取图片属性，看哪个大，高还是宽，然后在窗口调整大小后根据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

于 2012-06-30T02:42:05.120 回答
6

你根本不需要 JavaScript/jQuery。只需使用containorcover值background-size：

  1. background-size: contain将图像缩放到最大宽度/高度，以便在保持纵横比的同时整个图像可见。（没有溢出）

  2. background-size: cover将图像缩放到最大宽度，以便在保持纵横比的同时用图像填充整个 div。（如果图像不是正方形则溢出）

因此，您只需要编写以下代码：

#myDiv {
    background-size: contain;
}

或者：

#myDiv {
    background-size: cover;
}

更多信息：http ://css-tricks.com/perfect-full-page-background-image/

更新：演示

于 2012-06-30T02:07:34.273 回答
1

Zee Tee 的答案被标记为正确并且确实可以完成工作-但仅适用于横向图像。肖像图像不适用于它，您可以在 jsfiddle 示例中尝试使用这样的图像。

但是，您可以通过为包含图像的 div 指定高度来使其工作。您可以为此提供一个固定值或一个最小高度，两者都可以。

原因是在 resizeMyImg 函数中，在该行中：

div.find('img').height(div.innerHeight() + 'px').width('auto');

div.innerHeight 是未定义的，除非 div 具有与其关联的 height 或 min-height CSS 属性。

于 2013-09-02T11:41:56.423 回答
0

你可以简单地这样做：

 <img src="your_picture.png" alt="" style="width:100%;height:100%"></img>

当您的容器 div 调整大小时，图像将自行拉伸以填充整个 div。

编辑：

如果您不希望图像倾斜：

 <img src="your_picture.png" alt="" style="width:100%"></img>

或者：

 <img src="your_picture.png" alt="" style="height:100%"></img>

根据您不想溢出的维度...

于 2012-06-30T02:00:32.767 回答