javascript - Content being cropped when scaling a div -

javascript - Content being cropped when scaling a div -

i'm trying create div can zoomed in on using 'scale' property. however, when scale image, scales fine, outsides of image beingness cropped , can't scroll around page see rest of image reason.

example on codepen:

http://codepen.io/anon/pen/xlgfl

so if @ greenland example, , click 'in' button, you'll see after image has been scaled, 90% of greenland disappears , cannot scroll view missing part of greenland or anywhere else on map, want able do.

i've tried things adding background-size:cover , 100% 100%, i've tried adding overflow:auto, i've tried putting image in image tag within map-container div , i've tried putting div around map-container div has fixed width , height overflow:auto on i'm getting same results every time.

any help much appreciated!

edit solution:

to prepare it, used candlejack's solution , alter zoomin() function setting variable alter top/left position depending on how far zoomed in. had trial/error right values site. had utilize same code below (with zoommargin changes in switch statement) in zoomout() function alter previous zoommargin value.

var zoommargin = 0; function zoomin(){ //get id of element scaled , scale 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 scale value (the scale value in switch statement 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>

i took background image out of #map-container , placed in markup img - as shown here.

this allows scrolling total extent of image, regardless of zoomed level.

you may need tweak image styling resemble original design, should @ to the lowest degree solve immediate scrolling issue.

edit:

new version here: http://codepen.io/anon/pen/ehdmg

added position: relative img css, , altered top rule in js functions zoomin/zoomout.

so far i've used static values of 20% , 0% demonstrate point - looks first time zoom in. ideally these values should set dynamically depending on zoom depth at. set variable store integer increments every time user zooms in , decrements every time user zooms out, , calculate appropriate top position value depending on variable.

javascript html css