缩小浏览器窗口时停止背景图像调整大小

Question

我一直试图阻止 background-img 调整大小，因为它会干扰将红点或 pointer 保留在 background-img 上的 JavaScript 代码当我调整浏览器大小时。

问题： 当重新调整浏览器窗口的大小时，背景图像会调整大小并且红点会保持在同一个位置。我希望它停止调整大小。

我想要什么：

1.我希望背景图像的特定部分中的红点不移动。我猜我们必须为此调整 JavaScript。

2.当我调整大小或打开一个较小的浏览器窗口时，背景图像应该保持相同的大小，并且不在视野范围内的任何东西都应该在视野之外。我假设这是一个 CSS 问题。 Here's my fiddle

请告诉我我应该对 JavaScript 进行哪些更改以确保红点保持在同一个位置，并让我知道我应该对 CSS 进行哪些更改以确保 background-img 没有调整大小但不在视线范围内。谢谢！ CSS：

.container {
    background:url(http://www.seomofo.com/downloads/new-google-logo-knockoff.png) no-repeat center center fixed;
    width: 1000px;
    height: 380px;
     background-size:contain;
}

.wrapper  {     background-image: linear-gradient(360deg, #0d58a6, #0a488a);}
.top {height:100%; width:1000px: background:blue; }

.pointer {
    margin-left:-10px;
    margin-top:-10px;
    width:20px;
    height:20px;
    border-radius:10px;
    background-color:#F00;
    position:fixed;
}

HTML

<div class="wrapper">
<div class="container">
<div id="pointer1" class="pointer"></div>
<div id="pointer2" class="pointer"></div>
<div id="pointer3" class="pointer"></div>
<div id="pointer4" class="pointer"></div>
<div id="pointer5" class="pointer"></div>
<div id="pointer6" class="pointer"></div>
<div id="pointer7" class="pointer"></div>
<div id="pointer8" class="pointer"></div>
</div>
</div>

JS

var image = { width: 550, height: 190 };

var target = new Array();
target[0] = { x: 184, y: 88 };
target[1] = { x: 284, y: 88 };
target[2] = { x: 384, y: 88 };
target[3] = { x: 484, y: 88 };
target[4] = { x: 184, y: 150 };
target[5] = { x: 284, y: 150 };
target[6] = { x: 384, y: 150 };
target[7] = { x: 484, y: 150 };

var pointer = new Array();
pointer[0] = $('#pointer1');
pointer[1] = $('#pointer2');
pointer[2] = $('#pointer3');
pointer[3] = $('#pointer4');
pointer[4] = $('#pointer5');
pointer[5] = $('#pointer6');
pointer[6] = $('#pointer7');
pointer[7] = $('#pointer8');


$(document).ready(updatePointer);
$(window).resize(updatePointer);

function updatePointer() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    // Get largest dimension increase
    var xScale = windowWidth / image.width;
    var yScale = windowHeight / image.height;
    var scale;
    var yOffset = 0;
    var xOffset = 0;

    if (xScale > yScale) {
        // The image fits perfectly in x axis, stretched in y
        scale = xScale;
        yOffset = (windowHeight - (image.height * scale)) / 2;
    } else {
        // The image fits perfectly in y axis, stretched in x
        scale = yScale;
        xOffset = (windowWidth - (image.width * scale)) / 2;
    }

    var arrayLength = target.length;

    for (var i = 0; i < arrayLength; i++) {
        pointer[i].css('top', (target[i].y) * scale + yOffset);
        pointer[i].css('left', (target[i].x) * scale + xOffset);
    }

    }

Answer 1

在.container 中，将background-size:contain; 更改为设定的像素数，例如800px。

Answer 2

尝试在正文中添加最小宽度

width: 100% !important;
min-width: 1000px;
height: 100%;
margin: 0px;
padding: 0px;