Question

我试图使用＆＃39;缩放＆＃39;来制作可以放大的div。属性。但是，当我放大图像时，它会很好地缩放，但是图像的外部正在被裁剪，我无法在页面上滚动以查看图像的其余部分。

关于codepen的例子：

因此，如果您以格陵兰为例，然后点击“＆＃39; in＆＃39;按钮，你会看到图像缩放后，90％的格陵兰岛消失了，你不能向上滚动查看格陵兰岛的遗失部分或地图上的任何其他地方，这是我想要做的

我已尝试添加background-size:cover and 100% 100%之类的内容，我尝试添加overflow:auto，我已尝试将图片放入{{1}内的图片标记中我尝试在map-container div周围添加另一个div，它具有固定的宽度和高度map-container，但我每次都得到相同的结果。

非常感谢任何帮助！

使用解决方案进行编辑：

为了解决这个问题，我使用了Candlejack的解决方案，并通过设置一个变量来改变我的overflow:auto功能，根据放大的程度改变顶部/左侧位置。我不得不做试用/错误以获取我的网站的正确值。我还必须在zoomIn()函数中使用下面相同的代码（在switch语句中使用zoomMargin更改）来更改回之前的zoomOut()值。

zoomMargin

HTML：

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+"%" );
}

Answer 1

我从#map-container中取出了背景图片，并将其作为img - as shown here放入标记中。

无论缩放级别如何，都可以滚动到图像的整个范围。

您可能需要调整图像样式以与原始设计相似，但这至少可以解决即时滚动问题。

修改

此处的新版本：http://codepen.io/anon/pen/eHDmG

将position: relative添加到img CSS，然后更改JS函数中的top规则以进行zoomIn / zoomOut。

到目前为止，我已经使用了20％和0％的静态值来演示这一点 - 它在第一次放大时才真正看起来很好。理想情况下，这些值应根据您所处的缩放深度动态设置。您可以设置一个变量来存储一个整数，该变量在每次用户放大时递增，每次用户缩小时递减，然后根据此变量计算适当的top位置值。

缩放div时正在裁剪的内容

1 个答案: