将不同的图像更改/裁剪为动态调整大小的大小（根据浏览器）div

Question

我知道有相同的问题有一千个线程。如果我告诉你我已经阅读了所有内容，但我肯定会阅读其中的很多内容。

我目前的问题是这样的：我目前有一个div，根据浏览器的大小调整大小，并在底部有一个“菜单”的页脚。现在，我放置了一些“背景”图像淡入淡出内部div（我使用的引号，因为他们没有设置为CSS属性背景图像，因为你不能使用它的jQuery转换和css3转换是在IE中不支持）。我使用$(window).resize来实现这一点（并且这样我也解决了图像过度拉伸div到菜单不显示的问题）。到目前为止，如果图​​像不能正确匹配浏览器的宽度/高度比例，问题就来了。当然，我尝试根据屏幕的像素动态使用最大宽度，高度等来解决这个问题，并且在某种程度上它可以工作。我在某种程度上说是因为某些图像的高宽比是“错误的”，当我调整它们的大小时（在高度和宽度上），屏幕边缘会留下空白。如果它只是一个图像，我会手动剪切该图像并使其适合。问题是我有很多。

我的想法是解决这个问题：当调整到浏览器的宽度或浏览器的高度时，每个图像都会留空。我想调整图像大小，不会留下空白，并且CROP（或剪切）图像的其他部分将超出屏幕的高度/宽度。

我不知道如何做到这一点。我在jquery中搜索了一些Image裁剪，发现了不是我想要的东西。 Moslty选择图片的一部分......我不知道。

任何想法？我可以回答任何问题或提供有关我的代码的更多详细信息。

非常感谢！

我的功能，改变图像：

$(function() { 
     $imgs = $('.bgChange'), 
     imgAmount = $imgs.length; 

    $($imgs.css('position', 'absolute').hide().get(0)).show(); 

    window.setInterval(swapImages, tiempo); 

    function swapImages() { 
     var $currentImg = $($imgs[current]); 
     if(current == imgAmount-1) current = -1; 
     var $nextImg = $($imgs[++current]), 
      speed = 1500; 
     $currentImg.fadeOut(speed,function(){$nextImg.fadeIn(speed);}); 

    } 
}); 

我.bgChange类

.bgChange 
{ 
margin:0; 
border:0; 
padding:0; 
z-index:-1; 
position:absolute; 
} 

我的div与图像（它使用的是我不某些CSS属性适合屏幕大小”如果有人需要它，我可以粘贴它们）：

<div id="DummyFondo"> 
     <img class='bgChange' src="img/bg03.jpg" alt="" /> 
     <img class='bgChange' src="img/foto_2.jpg" alt="" /> 
     <img class='bgChange' src="img/Semillas2.jpg" alt="" /> 
     ....goes on 
</div> 

我调整大小功能：

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

的resizeImages方法不起作用，这是我想改变的人。我已经试过之类的东西

function ResizeImages() 
{ 

    $imgs = $('.bgChange'), 
    imgAmount = $imgs.length; 
    for(a = 0; a < imgAmount; a = a + 1) 
    { 
     var $currentImg = $($imgs[a]); 
     $currentImg.css("max-width", $(window).width() + "px" + " !important;"); 
     $currentImg.css("max-height", $(window).height() + "px" + " !important;"); 
    } 

} 

而改变这些事情高度，宽度，最小宽度等等。这里是我要放置“裁剪”逻辑的地方：我决定裁剪哪一面（以及裁剪本身）的计算方法

Answer 1

首先，这里的就是我要稍微解释一下演示，即调整大小的图像，以适应窗口根据您的规格（您可以轻松地将其更改为适合div或任何其他容器元素）：little link to the little demo。

这里我的想法是，你总是调整任何尺寸（高度/宽度）更大，然后，“裁剪”更小尺寸的多余量，你将定位“拉”到合适的负数值。下面是在该演示中调整大小的代码：

function resizeImg() { 
    var curimg = $('.bgChange'); 
    var ww = $(document).innerWidth(), hh = $(document).innerHeight(); 
    if(hh > ww) { 
     curimg.height(hh); 
     var lft = - Math.floor((curimg.width() - ww)/2); 
     curimg.css({"top":"0px", "left":lft}); 
    } 
    else if(ww > hh) { 
     curimg.width(ww); 
     var tp = - Math.floor((curimg.height() - hh)/2); 
     curimg.css({"left":"0px", "top":tp}); 
    } 
} 

我希望以任何方式帮助你！如果代码模糊，我很乐意解释代码的任何部分。

Answer 2

您需要支持哪些浏览器？CSS3可以排序的：

.backgroundDiv { 
    background-size: cover; 
} 

jQuery的可以使老版本浏览器这项工作：http://louisremi.github.com/jquery.backgroundSize.js/demo/