javascript - 响应式 DIV 覆盖在 "background-size: contain"- 解决警报触发的问题

Question

问题:

我正在使用 background-size: contain 图像，DIV 覆盖在顶部，我希望它们相对于图像的比例和纵横比保持静止。

它可以工作，但有一个小问题，即浏览器的宽度小于背景图像的宽度。发生这种情况时，您会看到覆盖 DIV(分别为 .navbar 和 #home)开始滑出位置，一旦出现就会立即恢复到正确位置浏览器会自行纠正。

我写了一个Fiddle包含警报。当浏览器宽度小于背景图像宽度时会触发警报。您需要水平调整浏览器窗口的大小才能触发。您可以注释掉警告以观察 DIV 的变化。

是什么原因造成的，我该如何预防？

代码:

var width = $('.bg').width();
var height = $('.bg').height();

var imgWidth = width > height ? 350/325 * height : width;
var imgHeight = height > width ? 325/350 * width : height;
var imgTop = imgHeight * .75 + ((height - imgHeight) / 2);

$('.navbar').css({
    'width': imgWidth,
    'height': imgHeight * .15,
    'top': imgTop + 'px'
});

$(window).on("resize", function() {

    width = $('.bg').width();
    height = $('.bg').height();

    imgWidth = width > height ? 350/325 * height : width;
    imgHeight = height > width ? 325/350 * width : height;
    imgTop = imgHeight * .75 + ((height - imgHeight) / 2);

    if (width < imgWidth) {
        //alert(width + 'x' + height + ', ' + imgWidth + 'x' + imgHeight);
    }

    $('.navbar').css({
        'width': imgWidth,
        'height': imgHeight * .15,
        'top': imgTop + 'px'
    });

});

Answer 1

它跳跃是因为:

您有一个矩形图像 --350px X 325px。所以这意味着 width === 350px 和 height === 325px。

您正在检查这两行中是否有 width > height 和 height > width:

imgWidth = width > height ? 350/325 * height : width;
imgHeight = height > width ? 325/350 * width : height;

即您正在检查宽度(从 350 像素开始)是否大于高度 (325)，以及高度 (325) 是否大于宽度 (350)。

以第二个示例为例:高度不会大于宽度，直到您将窗口水平缩小 25 像素(350 - 325)超出图像开始缩小的点。因此，对于前 25 像素，不会重新计算高度，因为 height > width 仍然是 false。

对此最简单的补救措施是简单地检查偏移量——检查 width - 25 > height 和 height + 25 > width 是否:

imgWidth = width - 25 > height ? 350/325 * height : width;
imgHeight = height + 25 > width ? 325/350 * width : height;

JSFiddle Here

此外，对于我认为更简洁的代码，尽管更复杂的修复，请查看此 fiddle Here