Question

不知道如何称呼我的标题。我有一个非移动设备的页面。在这个页面中，我想要一个高图像始终适合窗口高度。 Page

完成它：

#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盒始终保持在图像上的相同位置 - 无论窗口的大小如何？任何解决方法？

当我试图将想象加载到“背景”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的位置，这是您的关闭位置相对，绝对或固定div。（更多关于这里的定位http://alistapart.com/article/css-positioning-101）

由于你的左上角和下边都是相对于屏幕全尺寸的东西，它会在你调整窗口大小时移动。你需要的是#background只覆盖img的大小。这意味着您需要将图像作为img标记，该标记占用#background可以看到并适合的宽度。我们可以通过一个名为shrink wrapping的技巧来完成背景以适应img标记，你真的不需要经常这样做，但这是一个很好的用例。

我在现有内容中添加了一些html，以使所有内容看起来都像。我使用了一些css hack来使图像居中，使＃background-container 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;
}

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

相对于具有100％高度的图像的比例和位置div

2 个答案: