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

我知道有一千多条线都有同样的问题。如果我告诉你我都读了，我会撒谎，但我确实读了很多

我目前的问题是：我目前有一个div，它根据浏览器的大小调整大小，并且有一个底部带有“菜单”的页脚。现在，我在div中放置了一些淡入淡出的“背景”图像（我使用引号是因为它们没有设置为css属性背景图像，因为您不能使用jquery转换，并且IE中不支持css3转换）。我使用了

$（窗口）。resize

来实现这一点（这样我还解决了图像将div过度拉伸到菜单无法显示的点的问题）。到目前为止，问题在于图像与浏览器的宽度/高度比例不匹配。当然，我试着根据屏幕的像素动态使用最大宽度、高度等来解决这个问题，在某种程度上它是有效的。我这么说在某种程度上是因为一些图像的纵横比是“错误的”，当我调整它们的大小时，在屏幕边缘留下空白（一些在高度，一些在宽度）。如果它只是一个图像，我会手动剪切该图像并使其适合。问题是我有很多

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

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

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

非常感谢

我的更改图像的功能：

$(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
{
margin:0;
border:0;
padding:0;
z-index:-1;
position:absolute;
}

我的div和图像（它适合屏幕大小，使用一些我不了解的css属性，并且位于单独的文件中。如果有人需要它，我可以粘贴它们）：

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;");
    }

}

函数ResizeImages（）
{
$imgs=$（'.bgChange'），
imgAmount=$imgs.length；
对于（a=0；a

---

把这些东西改成高度，宽度，最小宽度等等。这里是我想使用“裁剪”逻辑的地方：我决定裁剪哪一侧（以及裁剪本身）的计算。

您需要支持哪些浏览器？CSS3可以对此进行排序：

.backgroundDiv {
    background-size: cover;
}

---

jQuery可以在较旧的浏览器中实现这一点：

首先，这里是我将要解释的一个小演示，它可以根据您的规范调整图像的大小以适应窗口中的大小（您可以轻松地将其更改为适合

div

或任何其他容器元素）：

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

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});
    }
}

---

我希望这对你有任何帮助！如果代码的任何部分含糊不清，我都很乐意解释。

代码，太多的文字……来自问题：“（我使用引号是因为它们没有设置为css属性背景图像，因为您不能使用jquery转换，IE也不支持css3转换）。”不能在具有背景图像的对象上使用jQuery转换？不，不能。我认为有一种涉及精灵的方法，但并不是每个浏览器都支持这种方法=（你说的是fadeIn和fadeOut吗？它们在IE6中工作=/不用担心。如果你的div中有其他不想褪色的东西，你完全可以在你已经拥有的div后面放置另一个div，并将背景图像放在其中。完美无瑕。我必须编辑一些东西以适合我的东西，但我从这里得到了主要想法=）

.backgroundDiv {
    background-size: cover;
}

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});
    }
}