Javascript z索引为100的新块变得太大

这不是我的剧本

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

我尝试了自动边距、最大宽度/高度和删除顶部：0；左：0

下面是脚本的部署位置：

当我在电脑上点击一个图像时，原始代码运行良好。当我使用手机并轻触图像时，根据图像是垂直还是水平放大，图像会变得过大并脱离屏幕

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

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

函数showImage（smSrc、lgSrc）{
document.getElementById（'largeImg'）。src=smSrc；
showlageImagePanel（）；
取消选择全部（）；
setTimeout（函数（）{
document.getElementById（'largeImg'）。src=lgSrc；
}, 1)
}
函数showlageImagePanel（）{
document.getElementById（'largeImgPanel'）。style.display='block'；
}
函数unselectAll（）{
if（文档选择）
document.selection.empty（）；
if（window.getSelection）
getSelection（）.removeAllRanges（）；
}
#大面板{
文本对齐：居中；
显示：无；
位置：固定；
z指数：100；
顶部：0；左侧：0；宽度：100%；高度：100%；
背景色：rgba（100100,0.5）；
}

听上去，您可能正在处理旧的Android

位置：修复了问题。试试看

如果这不能解决问题，请尝试在文档/容器上设置100%宽度和高度，然后对图像使用最大宽度和最大高度

我没有在评论部分提供这一点，因为我没有足够的声誉发表评论。
从我所看到的，问题不仅仅在于脚本。e、 g.如果您将移动设备保持在横向模式，并单击图像，您将看到所有大图像在单击时都完全可见（但它们可能不会填满屏幕）。
目前，大图像的HTML似乎是硬编码的，高度为100%，您需要删除它，并通过检查比率在Javascript中设置它，如果是纵向图像，则将高度设置为100%，如果是横向图像，则将宽度设置为100%
，这只是一个解决方法。我已经为你的图片输入了一个快速的CSS onclick事件。因此，当你点击图像时，它应该将图像扩展到100%的高度/宽度，并且在屏幕上居中

这也意味着你必须将相关的部分复制/粘贴到你的代码中，但是既然你可以使用CSS，为什么还要使用JS呢？毕竟人们有时会禁用Javascript



.box{
宽度：700px；
高度：700px；
背景色：#000；
颜色：白色；
保证金：0自动；
显示器：flex；
证明内容：中心；
}
.收件箱{
文本对齐：居中；
垂直对齐：中间对齐；
线高：350px；
宽度：350px；
高度：350px；
背景色：#fff；
颜色：#000；
自对准：居中；
}
#btnctrl{
显示：无；
}
#btnctrl:选中+标签>.fb{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
宽度：100%；
身高：100%；
保证金：自动；
溢出：自动；
}

您正在检查窗口。内部高度和内部宽度，您应该检查图像高度和宽度如果我已经回答了您的问题，您可以将其标记为已回答吗，使用基于屏幕大小和图像外观的媒体查询的高度，不太难确定。