0

我知道有大约一千个线程有同样的问题。如果我告诉你我读了所有这些，我会撒谎，但我肯定读了很多。

我目前的问题是：我目前有一个 div 可以根据浏览器的大小调整大小，并且底部有一个带有“菜单”的页脚。现在，我在 div 中放置了一些淡入淡出的“背景”图像（我使用引号是因为它们没有设置为 css 属性背景图像，因为你不能使用 jquery 转换和 css3 转换是IE 中不支持）。我用$(window).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 课程

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

}

并将这些内容更改为高度、宽度、最小宽度等。这里是我想放置“裁剪”逻辑的地方：我决定裁剪哪一侧（以及裁剪本身）的计算

4

2 回答 2

1

首先，这是我将要解释的一个小演示，它根据您的规范调整图像大小以适合窗口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});
    }
}

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

于 2012-08-17T14:22:05.613 回答
0

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

.backgroundDiv {
    background-size: cover;
}

jQuery 可以在旧版浏览器中实现这一点：http: //louisremi.github.com/jquery.backgroundSize.js/demo/

于 2012-08-17T13:22:03.240 回答