javascript图像调整大小窗口

Question

我为网站开发的JavaScript出现问题。 我有悬停在它们上方的图像。

首先，我的脚本计算图像应该显示在窗口的右侧还是左侧：

$("html,body").live("mousemove", function (e) {
    //console.log("mousemove: "+e.pageX)  
    var width_window = $(window).width();
    var center = width_window / 2;
    if (e.pageX < center) {
        side = 'left';
    } else {
        side = 'right';
    }
});

然后，一旦我们知道将在窗口的哪一侧显示图像，我就有另一个脚本来调整图像的大小，具体取决于窗口的高度和宽度，包括边距：

this.resizeImg = function (img, offset) {
    var d = new Date();
    //console.log(d, side);

    var window_height = $(window).height();
    var img_height = $(img).height();
    var img_top = $(img).offset().top;

    var window_width = $(window).width();
    var img_width = $(img).width();
    var img_left;
    side == 'left' ? img_left = offset.left : img_left = window_width - offset.left;

    console.log(window_width, img_left)
    var image_resize_height = window_height - img_top - 20;
    var image_resize_width = window_width - img_left - 20;

    if (img_height + img_top > window_height && img_width + img_left > window_width) {
        console.log("h w")

        if (image_resize_width > image_resize_height) {
            $(img).css('height', image_resize_height + 'px').css("width", "auto");
        } else {
            $(img).css('width', image_resize_width + 'px').css("height", "auto");
        }

    } else if (img_height + img_top > window_height) {
        //console.log("h")
        $(img).css('height', image_resize_height + 'px').css("width", "auto");
    } else if (img_width + img_left > window_width) {
        //console.log("w")
        $(img).css('width', image_resize_width + 'px').css("height", "auto");
    } else {
        //console.log("non")
    }
};

它几乎可以正常工作，但是有时我的图像超出了窗口的宽度或高度。 我找不到解决方案...

这是我的CSS：

.vignette {
        max-height: 800px;
        max-width : 800px;
        z-index : 2;
        top : 25px;
}

.info{
    position : relative;
}

.info img {
    position : absolute;
    display : none;
    cursor : pointer;
}

我在jsFiddle中的完整脚本： http : //jsfiddle.net/CrnNZ/

这是我的网站的链接： http : //olivierlellouche.com/

非常感谢你的帮助 ！

Answer 1

您是否正在考虑将图像向下移动25px的事实？

.vignette {
    top : 25px;
}

我看到的唯一高度调整是20px ：

var image_resize_height = window_height - img_top - 20;

您可能只需要减去几个像素即可进行计算？

或者更好：

var img_top = $(img).offset().top;

可能在偏移区域的顶部，而不是图像的原始顶部。 在这种情况下，您仍然需要为此减去25px。

（从您的网站）可能有用的另一件事是始终启用或始终禁用右侧的垂直滚动条。 或者，当文本区域不是滚动条时，将其大小调整为小于可用区域。 （不幸的是，我根本无法让您的jsfiddle正常工作，我能看到的唯一错误是垂直计算错误。我看不到任何水平错误。）

如果您减去高度多几个像素，问题是否还会继续？

我无法从您的代码中看出来，但是它会放置图像然后重新调整大小吗？ 最好在放置图像之前先计算可用的大小，这样一来图像就永远不会改变大小。

编辑：

用较小的窗口查看您的网页后，我想到了其他东西。 $（window）.height（）与$（document）.height（）不同 。 请参阅： $（window）.height（）vs $（document）.height如果它们不相同，则可能需要对剩余页面进行不同的计算。