“背景尺寸:包含"内的响应式 DIV 缩放图片 [英] Responsive DIV scaling within "background-size: contain" image

问题描述

2015 年 1 月 1 日更新

我有一个居中的背景图像，它使用 background-size: contains 进行缩放.我想让 DIV(用于链接等)覆盖在背景上，并且在调整浏览器大小时也随所述背景缩放，但也保持相对于该背景大小的位置.

I have a centered background image that is scaling with background-size: contain. I would like to have DIVs (for links, etc.) that overlay on the background and also scale with said background whenever the browser is resized, but also stay positioned relative to that background's size.

在下面提供的 Fiddle 中，红色边框显示导航栏应存在的位置，绿色边框显示主页"按钮应存在的位置.尽可能在水平和垂直方向上调整浏览器窗口的大小——您应该看到条形在某些极端情况下如何无法正确定位在图像上.

In the Fiddle provided below, the red border shows where the navbar should exist and the green border shows where the 'Home' button should be. Resize your browser window as far as you can both horizontally, then vertically -- you should see how the bars do not stay positioned properly over the image at certain extremes.

更新/进度:我在所有场景中都适当地缩放了，当浏览器调整为窄的垂直窗口时除外.然后导航栏和主 DIV 向下移动，不再相对于图像保持位置.

Update/Progress: I have it scaling appropriately in all scenarios except when the browser is resized to a narrow vertical window. Then the navbar and home DIVs shift downward and don't stay positioned relative to the image.

原始小提琴: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,
    });

});

推荐答案

我觉得实际上有点接近.我仍然遇到的唯一问题是，当我使浏览器窗口垂直变窄时，DIV 向下移动并且没有正确定位.

I'm actually somewhat close, I think. The only problem I am still having is when I make the browser window very narrow vertically, the DIVs shift down and don't stay positioned properly.

更新了 Fiddle 此处.

Updated Fiddle here.

我使用 JavaScript 来获取实际的背景图像大小，然后根据这些结果计算 DIV 的大小和位置.

I'm resorting to JavaScript to get the actual background image size, then calculating the DIV's size and position based on those results.

$(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 缩放图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！