javascript - New block with z-index 100, becomes too large -

this not script.

i tried editing script when pictures clicked, not larger device's resolution, , centered in screen. unfortunately, i've tried places them on top-left , makes them smaller resolution.

i've tried margin auto, max-width / height, , removing top:0; left:0;

here's script deployed: http://idealportraits.com/

when click image on pc, original code works well. when use phone , tap image, depending whether image larger vertically or horizontally, becomes large , goes off-screen.

how make image open full resolution (width or height, whichever reached first) of device being used, not larger, , centered in screen?

<!-- images enlarge on click -->     <script type="text/javascript">         function showimage(smsrc, lgsrc) {             document.getelementbyid('largeimg').src = smsrc;             showlargeimagepanel();             unselectall();             settimeout(function() {                 document.getelementbyid('largeimg').src = lgsrc;             }, 1)         }         function showlargeimagepanel() {             document.getelementbyid('largeimgpanel').style.display = 'block';         }         function unselectall() {             if(document.selection)                 document.selection.empty();             if(window.getselection)                 window.getselection().removeallranges();         }     </script>      <style type="text/css">         #largeimgpanel {             text-align: center;             display: none;             position: fixed;             z-index: 100;             top: 0; left: 0; width: 100%; height: 100%;             background-color: rgba(100,100,100, 0.5);         }     </style> <!-- end script -->  

just work around. have typed quick css onclick event images. when click on images, should expand them 100% height/width, , centred on screen.

it means have copy/paste relevant bits onto piece of code, why use js when can use css, after people disable javascript sometimes.

http://codepen.io/ballard/pen/jrjaod

.box {    width: 700px;    height: 700px;    background-color: #000;    color: white;    margin: 0 auto;    display: flex;    justify-content: center;  }  .inbox {    text-align: center;    vertical-align: middle;    line-height: 350px;    width: 350px;    height: 350px;    background-color: #fff;    color: #000;    align-self: center;  }  #btnctrl {    display: none;  }  #btnctrl:checked + label > .fb {    position: fixed;    top: 0;    bottom: 0;    left: 0;    right: 0;    width: 100%;    height: 100%;    margin: auto;    overflow: auto;  }

<div class="box">            <div class="inbox">        <input type="checkbox" id="btnctrl"/>        <label class="btn" for="btnctrl"><img src="https://s19.postimg.org/777mf3pdv/facebook.png" class="fb"></label>            </div>  </div>

let me know if you, may save alot of scripting time.