问题：

我有一个居中的背景图片，可以使用background-size: contain进行缩放。我希望DIV（用于链接等）覆盖在背景上，并且每当浏览器调整大小时也可以与所述背景一起缩放，但也相对于该背景的大小保持定位。

在下面提供的小提琴中，红色边框显示导航栏应存在的位置，绿色边框显示“主页”按钮的位置。尽可能水平地，然后垂直地调整浏览器窗口的大小 - 您应该看到条形图在某些极端情况下如何在图像上保持正确定位。

更新/进度：当浏览器调整为一个狭窄的垂直窗口时，我在除了之外的所有场景中都进行了适当的缩放。然后导航栏和主DIV向下移动，不会相对于图像保持定位。

小提琴：

原始小提琴：http://jsfiddle.net/tc4hoLft/

新小提琴：http://jsfiddle.net/w5xjkj4e/1/

代码：

CSS：

html, body {
    background: #000;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}
.bg {
    height: 100%;
    background-image: url('https://placekitten.com/350/325');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}
.navbar {
    position: relative;
    width: 100%;
    height: 14%;
    top: 75%;
    margin: 0 auto;
    border: 1px solid red;
}
#home {
    position: absolute;
    top: 0;
    left: 21.5%;
    width: 7%;
    height: 100%;
    display: block;
    border: 1px solid green;
}

JS：

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

    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;

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

});

Answer 1

我认为，我实际上有点接近。我唯一的问题是当我使浏览器窗口垂直变窄时，DIV会向下移动并且不能保持正确定位。

更新了小提琴here。

我依靠JavaScript来获取实际的背景图片大小，然后根据这些结果计算DIV的大小和位置。

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

    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; //need to do calculations on this

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

});

Answer 2

而不是使用background-size：contains，如果你可以使用background-size: cover（没有图像降级太多），那么背景图像将完全填充容器。由于百分比位置是相对于容器的，因此它们现在也相对于图像。因此，他们现在更接近原始位置而不是图像。

Answer 3

<强> Working Fiddle

通过使用background-size: cover;，您可以实现这一目标。

html, body {
    background: url("https://placekitten.com/350/325") no-repeat scroll center center / cover #000;
    height: 100%;
    margin: 0 auto;
    min-width: 325px;
    overflow-x: hidden;
    width: 100%;
}

检查一下。的 Perfect Full Page Background Image

另一种解决方案可以是background-size: 100% 100%;

<强> Working Fiddle

在“background-size：contains”图像中响应DIV缩放

问题：

小提琴：

代码：

3 个答案: