Question

这不是我的剧本。

我尝试编辑此脚本，以便在点击我的图片时，它们不会大于设备的分辨率，并且它们将在屏幕中居中。不幸的是，我尝试过将它们放在左上角并使它们小于分辨率。

我尝试了自动上限，最大宽度/高度，并删除顶部：0;左：0;

当我点击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>

如果这对你有好处，请告诉我，可以节省很多脚本时间。

Answer 2

听起来，您可能正在处理旧的Android position: fixed问题。试试this。

如果这还没有解决问题，请尝试在文档/容器上设置100％宽度和高度，然后使用图像的最大宽度和最大高度。

我未在评论部分提供此信息，因为我没有足够的声誉发表评论。

Answer 3

从我所看到的，问题不仅仅在于脚本。例如如果您将移动设备保持在横向模式并单击图像，您将看到所有大图像在单击时完全可见（尽管它们可能不会填满屏幕）。目前，大图像的HTML似乎是硬编码的高度为100％，你需要删除它并通过检查比率来设置它，如果它是肖像图像然后将高度设置为100％和如果是横向图像，则将宽度设置为100％

z-index为100的新块变得太大

3 个答案: