在“背景大小：包含”图像内进行响应式 DIV 缩放

Question

2015 年 1 月 1 日更新

问题：

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

在下面提供的 Fiddle 中，红色边框显示导航栏的位置，绿色边框显示“主页”按钮的位置。尽可能地调整浏览器的大小 window，然后是水平方向，然后是垂直方向——您应该会看到在某些极端情况下，条形图在图像上的位置不正确。

更新/进展：我在所有情况下都适当缩放，除了当浏览器调整为窄垂直 window 时。然后导航栏和主页 DIV 向下移动并且不会保持相对于图像的位置。

Fiddle:

原 Fiddle：http://jsfiddle.net/tc4hoLft/

新 Fiddle：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

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

Answer 2

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

Answer 3

我认为我实际上有点接近。我仍然遇到的唯一问题是当我使浏览器 window 垂直方向非常窄时，DIVs 向下移动并且没有保持正确的位置。

已更新 Fiddle 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,
    });

});

在“背景大小：包含”图像内进行响应式 DIV 缩放

Responsive DIV scaling within "background-size: contain" image

html

css

responsive-design

positioning

问题：

Fiddle:

代码：