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

Question

我一直试图阻止背景图像调整大小，因为它干扰了这个JavaScript代码，当我调整浏览器大小时，它会将红点或指针保留在background-img上。

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

我想要的是：

我希望红点不要从背景img的特定部分移动。我猜我们必须为此调整JavaScript。

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

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

Here's my fiddle

HTML

.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;
}

JS

<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>

Answer 1

在

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);
    }

    }

中将.container更改为一组像素，类似于background-size:contain;。

Answer 2

尝试在体内添加最小宽度

800px