javascript - z-index 为 100 的新区 block 变得太大

Question

这不是我的脚本。

我试着编辑这个脚本，这样当我的图片被点击时，它们不会大于设备的分辨率，并且它们会位于屏幕的中央。不幸的是，我尝试将它们放在左上角并使它们小于分辨率。

我试过 margin auto、max-width/height 和删除 top:0;左:0；

这里是部署脚本的地方:http://idealportraits.com/

当我在 PC 上单击图像时，原始代码运行良好。当我使用手机点击图像时，根据图像是垂直放大还是水平放大，它会变得太大并离开屏幕。

如何使图像以所用设备的全分辨率(宽度或高度，以先达到者为准)打开，而不是放大，并在屏幕居中？

<!-- 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 --> 

Answer 1

就像变通一样。我已经为您的图片输入了一个快速的 CSS onclick 事件。因此，当您点击图片时，它应该将它们扩展到 100% 高度/宽度，并且还位于屏幕中央。

这也意味着您必须将相关位复制/粘贴到您的代码段中，但是为什么在可以使用 CSS 时使用 JS，毕竟人们有时会禁用 Javascript。

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>

如果这对您有好处，请告诉我，可能会节省很多编写脚本的时间。