缩放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时裁剪的内容

回答

相关问题