相对于窗口上的图像放置的Divs调整大小（几乎可以工作）

Question

我有3＆＃34;引脚＆＃34;放在div（#outerdiv）内。 div有background-image，并且在调整窗口大小时，引脚应始终位于背景图像上的相同位置。 适用于#pin1 ，但不适用于#pin2和#pin3（使用相同的代码）。唯一的区别是#pin1是html中的第一个。

编辑： JSFIDDLE和代码段（向下滚动）

调整窗口大小时，#pin1完美运行（位于背景图像上的同一位置）。但是，#pin2和#pin3以及之后的所有其他内容都会向下推，因此不再位于同一位置。但是，它仍然在右侧水平轴上。

＆＃13;

＆＃13;

$(document).ready(function(){
    updateProductBg();
});
$(window).resize(function() {
    updateProductBg();
});
function updateProductBg(){
    if($(window).width()/$(window).height() >=  2600/1450) {
        $('#outerdiv').css({'height':'100%','width':$(window).height()*(2600/1450)+'px', 'margin-left':-$('#outerdiv').width()/2+'px', 'left':'50%', 'top':'0', 'margin-top':0});
    } else {
        $('#outerdiv').css({'height':$(window).width()*(1450/2600)+'px', 'width':'100%', 'margin-left':0, 'left':0, 'top':'50%', 'margin-top': -$('#outerdiv').height()/2+'px'});
    }
}

＆＃13;

#outerdiv {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6a/Luftaufnahmen_Nordseekueste_2013_05_by-RaBoe_314.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.pin {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/16/WP_SOPA_sm_icon_identica_ffffff.png);
    width: 32px;
    height: 33px;
    position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="outerdiv">
    <div id="pin1" class="pin" style="top:21%; left:38%;"></div>
    <div id="pin2" class="pin" style="top:13%; left:24.5%;"></div>
    <div id="pin3" class="pin" style="top:36%; left:26%;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

updateProductBg()用于使#outerdiv与background-image的大小完全相同。如果您想自己尝试一下，请使用2600和1450图片更改width和height。

Answer 1

.pin目前设置为position: relative;，这意味着top和left会将引脚偏离其在页面上绘制的位置。要将它们相对于#outerdiv放置，您需要将它们position: absolute;。

在原始版本中#pin1有效，因为它在移动之前会在#outerdiv的左上角输出。另外两个位置不正确，因为它们的位置受到放置在它们前面的引脚的影响。

$(document).ready(function(){
    updateProductBg();
});
$(window).resize(function() {
    updateProductBg();
});
function updateProductBg(){
    if($(window).width()/$(window).height() >=  2600/1450) {
        $('#outerdiv').css({'height':'100%','width':$(window).height()*(2600/1450)+'px', 'margin-left':-$('#outerdiv').width()/2+'px', 'left':'50%', 'top':'0', 'margin-top':0});
    } else {
        $('#outerdiv').css({'height':$(window).width()*(1450/2600)+'px', 'width':'100%', 'margin-left':0, 'left':0, 'top':'50%', 'margin-top': -$('#outerdiv').height()/2+'px'});
    }
}

#outerdiv {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6a/Luftaufnahmen_Nordseekueste_2013_05_by-RaBoe_314.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.pin {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/16/WP_SOPA_sm_icon_identica_ffffff.png);
    width: 32px;
    height: 33px;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="outerdiv">
    <div id="pin1" class="pin" style="top:21%; left:38%;"></div>
    <div id="pin2" class="pin" style="top:13%; left:24.5%;"></div>
    <div id="pin3" class="pin" style="top:36%; left:26%;"></div>
</div>

Answer 2

您是否尝试将规则position的{​​{1}}更改为#outerdiv。

我确定这有帮助。我目前无法在手机上重现它。由于您还没有提供正在运行的代码示例。 ： - ）