相对于100%高度的图像缩放和定位div

Question

不知道如何调用我的标题。我有一个非移动设备页面。在这个页面中，我希望有一个高的图像总是适合窗口的高度。页面

这样做：

#background{
position:absolute;
background-color:#F00;
width:100%;
height:100%;
top:0%;
background-image:url(Ortsplan_2014_small.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}

在"页面"链接中看起来像。

现在，当我滑动窗口以尝试它在其他屏幕上的外观时，我的绿色div框会发生以下情况：http://s14.directupload.net/images/140226/q8dbpdgj.jpg或者，当你在页面上时，只需自己缩放，看看会发生什么。

这是div框代码：

#hotspot-nickelsee{
position:absolute;
background-color:#0F0;
top:25%;
width:10%;
height:10%;
left:33%;
}

这是HTML代码：

<div id="background">
<div id="hotspot-nickelsee">
</div>
</div>

现在这里出了什么问题？无论窗口大小如何，我都必须做些什么才能使div框始终保持在图像上的相同位置？有什么变通办法吗？

当我试图将想象加载到"background"div中，而不是将其用作背景图片时，div会缩放到图像的100%大小，并填充窗口(图片非常大)，这不是我想要的。

谢谢你的帮助！

Answer 1

完成。使用Javascript。

<script>
jQuery(document).ready(
function()
{   
var background=jQuery('#background');  //hier holt man sich das div
var image_aspect_ratio=1500/2500; // seitenverhältnis des Bildes
function resize_image() {  // diese funktion verändert das div
var viewportHeight= jQuery(window).height();  // Höhe viewport
var div_width=Math.ceil(viewportHeight*image_aspect_ratio);  // div Höhe = viewport Höhe; div Breite = viewport Höhe * seitenverhältnis 
background.css("width",div_width); // Breite setzen
};
resize_image();  // beim ersten mal wird die Funktion ohne event handler aufgerufen
jQuery(window).resize(resize_image);  // bei jedem resize wird dieser event handler aufgerufen, der wiederum die funktion aufruft

});
</script>

这样做效果很好。无论如何，谢谢你的帮助！

Answer 2

问题是你的div，#background，正好围绕着身体的整个宽度和高度的热点。这是一个问题，因为调整窗口大小会重新调整相对于#background的位置，这是你的关闭位置相对、绝对或固定的divhttp://alistapart.com/article/css-positioning-101)

由于你的左上角和下角都是相对于屏幕的全尺寸，所以当你调整窗口大小时，它会移动。您需要的是#background只覆盖img的大小。这意味着你需要图像是一个img标签，它占据了#背景可以看到并适合的宽度。我们可以通过一种名为收缩包装的技巧来完成背景以适应img标记，老实说，你并不经常需要它，但这是一个很好的用例。

我在现有内容中添加了一些html，只是为了让所有内容看起来都像它。我用了一点css破解来居中制作#background容器display: inline-block的图像，这样我就可以在上面使用text-align: center。我经常使用margin: 0 auto居中，但我认为当你使用display: inline-block时不能使用它

对HTML 进行了以下更改

<div id="background-color">
<div id="background-container">
<div id="background">
<img class="background-image" src="Ortsplan_2014_small.jpg">
<div id="hotspot-nickelsee" class="hotspottet">
</div>
<div id="hotspot-marienkapelle" class="hotspottet">
</div>
<div id="Hotspot-Kirche" class="hotspottet">
</div><div id="Hotspot-Kirche2" class="hotspottet">
</div>
<div id="Hotspot-Stadtmauer" class="hotspottet">
</div>
<div id="Hotspot-Rathaus" class="hotspottet">
</div>
</div>
</div>
</div>

这些是对CSS的更改，这些注释是我删除的，所以一定要删除它们。

.background-image {
max-height: 100%;
}
#background-color {
position: absolute;
background-color: red;
width:100%;
text-align: center;
}
#background-container {
display: inline-block;
}
#background {
position: relative; /*changed from absolute*/
background-color: #F00;
/* width: 100%; */
/* height: 100%; */
/* top: 0%; */
/* background-image: url(Ortsplan_2014_small.jpg); */
/* background-size: contain; */
/* background-repeat: no-repeat; */
/* background-position: center; */
display: inline-block;
}

希望能有所帮助。当我在浏览器中尝试它时，它为我工作。如果你遇到困难或需要帮助实现它，请在下面发表评论。