问题:
我正在使用 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'
});
});
最佳答案
它跳跃是因为:
您有一个矩形图像 --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;
此外,对于我认为更简洁的代码,尽管更复杂的修复,请查看此 fiddle Here
关于javascript - 响应式 DIV 覆盖在 "background-size: contain"- 解决警报触发的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27737776/