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

Question

问题：

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

它有效，但有一个小问题，即浏览器的宽度小于背景图像的宽度。发生这种情况时，您可以看到叠加层 DIVs（分别为 .navbar 和 #home）开始滑出位置, 只会在浏览器自行纠正后立即恢复到正确位置。

我写了一个包含警报的 Fiddle。当浏览器宽度小于背景图像宽度时会触发警报。您需要水平调整浏览器大小 window 才能触发。您可以注释掉警报以观察 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;

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

以第二个示例为例：在您将 window 水平缩小超过图像开始缩小的点 25 像素 (350 - 325) 之前，高度不会大于宽度。因此，对于前 25 像素，不会重新计算高度，因为 height > width 仍然是错误的。

最简单的补救方法就是检查偏移量——检查是否 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

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

Responsive DIVs overlaying on "background-size: contain" - solve the issue where the alert fires

javascript

jquery

html

css

responsive-design

问题：

代码：