對於響應式設計，絕對定位元素的CSS left和top屬性沒有按預期計算

-1

我有一個響應式圖像，其位置相對於父容器。在同一父容器中，我有一個位置：絕對pin在圖像上的z-index值更高。對於響應式設計，絕對定位元素的CSS left和top屬性沒有按預期計算

針在靜態設計中顯示在正確的位置，但如果我想讓它適用於響應，它看起來像瀏覽器不能正確計算百分比，並且引腳不顯示在正確的位置。

爲了解決這個問題，我已經使用jquery來計算響應img大小（以像素爲單位），並且還計算了像素中引腳的css左和頂位置。但這仍然行不通。

HTML

<div class="col-xs-12" id="map"> 
      <img src="../img/world-map.jpg" alt="world-map" id="world-map"> 
      <a href="#" class="sydney" data-toggle="modal" data-target="#sydney-modal"></a> 
      <a href="#" class="melbourne" data-toggle="modal" data-target="#sydney-modal"></a> 
      <a href="#" class="perth" data-toggle="modal" data-target="#sydney-modal"></a> 
      <a href="#" class="singapore" data-toggle="modal" data-target="#sydney-modal"></a> 
      <a href="#" class="hongkong" data-toggle="modal" data-target="#sydney-modal"></a> 
      <a href="#" class="india" data-toggle="modal" data-target="#sydney-modal"></a> 
      <a href="#" class="china" data-toggle="modal" data-target="#sydney-modal"></a> 
</div> <!-- end col map-->

鏈接到測試頁：http://test.nsg.unsw.edu.au/contact/

LESS

#map 
    { 
     position:relative; 
     #world-map 
     { 
      width:100%; 
      z-index:-100;    
     } //end word-map 
     .sydney{ 
      position:absolute; 
      width:12px; 
      height:12px; 
      background-color:red; 
      /*left: 81.5%; 
      top: 77.5%;*/ 
      } 
    }

JavaScript解決方案

$(document).ready(function() { 
     $('nav li:contains("Contact us")').addClass("active"); 

     //get width and height of image in px 
     var imgWidth=$("#world-map").width(); 
     var imgHeight=$("#world-map").height(); 
     //console.log("image width x height ="+imgWidth+"x"+imgHeight); 
     //change icon position according to the percantage of where location is found 
     var sydneyLeft=0.815; 
     var sydneyTop=0.775; 
     //console.log("location left x top % ="+sydneyLeft+"x"+sydneyTop); 
     var sydneyLeftpx=0.815*imgWidth; 
     var sydneyToppx=0.775*imgHeight; 
     //console.log("location left x top px ="+sydneyLeftpx+"x"+sydneyToppx); 

     sydneyLeftpx=toInt(sydneyLeftpx); 
     sydneyLeftpx=sydneyLeftpx-6; //location-pinwidth 
     sydneyToppx=toInt(sydneyToppx); 
     sydneyToppx=sydneyToppx-6; //location-pinheight 

     //alert("location left x top px ="+sydneyLeftpx+"x"+sydneyToppx); 

     $(".sydney").css({left: sydneyLeftpx+"px", 
         top: sydneyToppx+"px"    
      }); 

});

注意：我還沒有添加JavaScript代碼的屏幕調整大小功能，只是通過刷新瀏覽器窗口來測試代碼。

有人可以澄清爲什麼這些值不能正確計算，我該如何解決這個問題？

來源

2014-10-27 Umair Cheema

css中沒有任何高度，因此可能在圖像加載之前完成計算。根據圖像寬高比提示設置高度 – charlietfl 2014-10-27 02:06:59

@charlietfl我不確定你是什麼意思....我已經使用jquery var imgHeight = $（「＃world-map」）。height（）獲取圖像高度。 – 2014-10-27 03:44:31

但如果圖像尚未加載，那麼當時沒有高度。 _document.ready_在加載圖像之前觸發。不過，您知道地圖圖像的縱橫比，因此您可以檢查父寬度並相應地設置 – charlietfl 2014-10-27 03:45:52

問題

我想創建就像使用img標記具有較小的z-index效果的HTML地圖標籤，和一個銷/位置超過img標籤。

我能夠成功地爲靜態設計做到這一點，但它並未針對響應式設計圖像工作。最初，我試圖通過使用CSS百分比來解決這個問題，但是針/位置的位置總是與不同的屏幕尺寸有所不同。我試圖通過計算圖像寬高比來解決問題，然後使用Javascript更改像素的引腳位置。它也沒有工作。

解決方案

我解決了使用HTML標記的地圖和區域標記了這個問題。我使用了Matt Stow的插件來使地圖響應。 http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

來源

2014-10-29 01:17:50

對於響應式設計，絕對定位元素的CSS left和top屬性沒有按預期計算

回答

相關問題