相對於100％高度的圖像的比例和位置div

不知道如何調用我的標題。我有一個非移動設備頁面。在這個頁面中，我想要一個高度適合窗口高度的圖像。 Page 相對於100％高度的圖像的比例和位置div

幹過這樣的：

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

貌似在「頁面」的鏈接。現在

當我skale窗口，以爭取其外觀上的其他屏幕，這是發生了什麼我的綠格框：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 box始終保持在圖像上的相同位置 - 無論窗戶大小如何？任何解決方法？

當我試圖加載想象到「背景」div而不是使用它作爲背景圖片時，div縮放到100％大小的圖像並填充窗口（圖片非常大），這就是不是我想要的。

感謝您的幫助！

來源

2014-02-26 Matthias Gies

問題在於你的div，#background，圍繞熱點遍佈整個身體的寬度和高度。這是一個問題，因爲調整窗口的大小會重新定位相對於#background的位置，這是您關閉相對位置，絕對位置或固定div的位置。（更多關於此處的定位http://alistapart.com/article/css-positioning-101）

由於左上角和右下角都是相對於屏幕全尺寸的東西，所以在調整窗口大小時它會移動。你需要的是#background只覆蓋img的大小。這意味着你需要圖像是一個img標籤，佔用#background可以看到的寬度。我們可以通過一個名爲shrink wrapping的技巧來完成適應img標籤的背景，這種技巧你並不經常需要，但這是一個很好的用例。

我添加了一些HTML到現有的只是爲了讓一切看起來像它。我有點用CSS的黑客中心圖像使＃背景容器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; 
}

希望有所幫助。當我在瀏覽器中嘗試時爲我工作。如果您遇到困難或需要幫助實施它，請隨時在下面發表評論。

來源

2014-02-26 17:04:51 John

你好，謝謝你的回答！很高興看到有人真的回覆。根據我在Dreamweaver中看到的方式完成工作時，它似乎能夠工作，只是當我在瀏覽器中查看時，我仍然存在兩個問題。 1.圖像再次填滿整個寬度，您必須滾動。 2.調整窗口大小時，圖像不會調整大小。 –

我現在按照我希望的方式完成了它。綠色框現在使用紅色的div作爲他們的父母。意味着他們調整大小並保持在調整窗口大小後的位置。現在唯一的問題是在那裏得到一個只佔用那個div高度的圖像。所以它基本上保持不變，只有背景中的圖片而不是紅色的框。 –

所以基本上我需要的是紅色框內的圖像，用框來調整大小。就好像圖像是盒子一樣。意味着它可以以各種方式延伸。但我沒有得到它告訴圖像始終是100％的div框高度和div框的100％寬度。 –

完成它。使用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>

這樣工作很好。無論如何感謝您的幫助！

來源

2014-02-28 09:28:15

相對於100％高度的圖像的比例和位置div

回答

相關問題