缩小浏览器窗口时停止后台调整大小

Question

我一直试图阻止 background-img 调整大小，因为它干扰了这个在后台保留红点或指针的JavaScript代码-img，因为我调整了浏览器的大小。

问题： 重新调整浏览器窗口大小时，background-img会调整大小并且红点保持在同一位置。我希望它停止调整大小。

我想要什么：

1。我希望背景img的特定部分有红点 NOT MOVE 。我猜我们必须为此调整JavaScript。

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

请告诉我，我应该对JavaScript做出哪些更改，以确保红点保持在同一个位置，以及CSS以确保后台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;