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

Question

我知道有大约一千个线程有相同的问题。如果我告诉你我都读过它们，那我是在撒谎，但我确实读了很多。

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

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

我不知道如何做到这一点。我在 jquery 中搜索了一些图像裁剪，发现了一些不是我想要的东西。 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});
    }
}

希望对您有所帮助!如果代码的任何部分含糊不清，我很乐意对其进行解释。