縮放div時裁剪的內容

我試圖製作一個div，可以放大使用'scale'屬性。然而，當我放大圖像時，它可以很好地縮放，但圖像的外部正在裁剪，並且出於某種原因，我無法在頁面上滾動查看圖像的其餘部分。縮放div時裁剪的內容

例如在codepen：

所以，如果你看一下格陵蘭例如，然後單擊「中」按鈕，你會看到圖像已被縮小後，90％的格陵蘭島消失了，你不能向上滾動查看格陵蘭島或地圖上其他任何地方的缺失部分，這是我想要做的。

我試着像加background-size:cover and 100% 100%的事情，我已經嘗試添加overflow:auto，我已經試過把圖像中的圖像標籤map-container專區內，我已經試圖把另一個DIV圍繞map-container DIV具有固定寬度和高度與overflow:auto就可以了，但我每次都得到相同的結果。

任何幫助，這是非常感謝！

隨溶液編輯：

要解決它，我用Candlejack的解決方案，並通過設置變量取決於它在多大程度上放大到更改頂部/左側位置改變我zoomIn()功能，我不得不。做試用/錯誤，以獲得我的網站的正確值。我還必須在我的zoomOut()函數中使用下面的相同代碼（在switch語句中使用縮放更改更改）才能更改回以前的zoomMargin值。

var zoomMargin = 0; 
function zoomIn(){ 
    //get the id of the element to be scaled and scale it using GSAP 
    var mapContainer = document.getElementById("map-container"); 
    TweenMax.set(mapContainer,{transformOrigin: "50% 50%"}); 
    TweenMax.to(mapContainer, 0.4, { scale: "+=1"}); 
    console.log("scale: "+mapContainer._gsTransform.scaleX); 
    //switch between the scale value (the scale value in my switch statement is from the GSAP library) 
    switch(mapContainer._gsTransform.scaleX){ 
     case 1: 
      zoomMargin = 24.9; 
     break; 
     case 2: 
      zoomMargin = 33.3; 
     break; 
     case 3: 
      zoomMargin = 37.5; 
     break; 
     case 4: 
      zoomMargin = 39.9; 
     break; 
     case 5: 
      zoomMargin = 41.6; 
     break; 
    } 
    $('#map-inner-container').css("top", zoomMargin+"%"); 
    $('#map-inner-container').css("left", zoomMargin+"%"); 
}

HTML：

<div id="map-container"> 
    <div id="map-inner-container"> 
     <img src="map-url.png" style="z-index:-9999;"> 
    </div> 
</div>

來源

2014-06-19 Nathan

我把背景圖片從你#map-container，並把它放在標記爲img - as shown here。

這允許滾動圖像的全部範圍，而不管放大的級別。

您可能需要調整圖像樣式以類似於您的原始設計，但這至少應解決即時滾動問題。

編輯：

新版本在這裏：http://codepen.io/anon/pen/eHDmG

新增position: relative到IMG CSS，然後改變了top規則在JS功能zoomIn /縮小（ZoomOut）。

到目前爲止，我已經使用了20％和0％的靜態值來證明這一點 - 它只在第一次放大時才真的看起來不錯。理想情況下，這些值應根據您在。您可以設置一個變量來存儲一個整數，每當用戶放大時每次放大和遞減時遞增，然後根據此變量計算適當的位置值top。

來源

2014-06-19 08:22:06 Candlejack

我看了一下你的例子，但不幸的是，當你放大它時，它仍然裁剪圖像的其餘部分。例如，如果您在鏈接中查看格陵蘭島，然後點擊「進入」按鈕，您會看到格陵蘭島的上半部分消失。 – Nathan

啊，我明白了 - 我會編輯我的答案。 – Candlejack

非常感謝，最終使用你的解決方案來設置最高規則，儘管我也添加了左邊以防止搞亂。在我的問題編輯中添加了一些代碼 – Nathan

縮放div時裁剪的內容

回答

相關問題