javascript - How to center a scrollable image that is larger than the screen -
i'd make image viewer centers image regardless of how big , allows scrolling view entire image.
the problem i'm running that, while centering images smaller container easy, when they're larger tranform i'm doing positions image off right , top of screen.
here fiddle has fixup javascript make work: http://jsfiddle.net/d3y0b8bd/
the code below work smaller images (e.g. https://upload.wikimedia.org/wikipedia/meta/0/08/wikipedia-logo-v2_1x.png)
but larger, translate(-50%, -50%) transform translate image past left , top margins of parent.
.lightboxroot { position: fixed; width: 100%; height: 100%; overflow: auto; /*aesthetic*/ background-color: red; } .lightboximg { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); /*aesthetic*/ background-color: blue; }
html:
<div class="lightboxroot"> <div class="lightboximg"> <img id="imgelt" src="http://upload.wikimedia.org/wikipedia/commons/6/65/cute_beagle_puppy_lilly.jpg"></img> </div> </div>
here's fiddle in js updating position of scrolltop
, scrollleft
, set scroll center of img.
Comments
Post a Comment