如何居中并专注于模态图像答案

【问题标题】：How to center and keep focus on Modal image如何居中并专注于模态图像
【发布时间】：2018-07-28 00:26:10
【问题描述】：

在移动设备上查看时，我正在使用模态显示大分辨率版本的图像。这样用户可以选择是否加载更大的文件以及更详细地检查图像。

您可以在手机https://glewindesign.com/project_1.html看到有问题的网页

第一个问题是我的图像大于模态容器以及视口。我希望滚动条采用这种方式，这样用户就可以用手指四处移动并检查完整尺寸的图像，而无需捏合/缩放。

由于图像较大，我无法将其居中。无论我尝试什么 CSS 居中技巧，它总是加载在图像的左上角。

第二个问题是焦点没有被正确地困在模态中。

当我滚动浏览高分辨率图像时，有时会出现用户与模态背后区域交互的故障？当我快速向下滚动时，我注意到了这一点。有时会出现固定的页脚菜单。

我用过这个教程

并且正在使用我认为会阻止与模式后面的元素交互的叠加层，但就像我说的那样，我仍然会遇到有时出现固定页脚的问题。

对此的任何建议将不胜感激！

【问题讨论】：

我一直在寻找其他人试图在模态中居中一个大的可滚动图像并尝试了这个线程中的建议stackoverflow.com/questions/14562457/… 仍然没有运气，即使它确实在其父级中移动了图像容器它似乎切断了图像的一部分。

【解决方案1】：

所以我试图完成的事情实际上是不可能使用 CSS 实现的。您可以将小于包含块的图像居中，但不能将大于其包含块的图像居中，因为它只会位于块的左上角。我需要实现一些 javascript 来定位滚动条，以便图像出现在中心。

【讨论】：

【解决方案2】：

位置：固定最高：50% 左：50% 变换：翻译（-50%，-50%）；添加到 .mobile-hires

【讨论】：

我更改了这些设置，尽管它确实强制图像居中，但没有滚动机制让您看到移到左侧或顶部上方的图像。听起来我可能需要在打开模态图像时使用 javascript 将滚动条位置垂直水平放置 50%？

【解决方案3】：

保存模态内容的容器需要将溢出属性设置为滚动。它还需要一个 max-width 属性，其值小于图像分辨率。然后，图像将滚动。

【讨论】：

保存图像的模态容器将溢出属性设置为滚动。最大宽度小于图像分辨率。如您所见，图像滚动，但仍未居中。我想让可滚动的图像在打开时在视口内居中。我尝试添加这个margin-left: 50%;变换：translateX（-50%）；这确实会改变位置并看似居中图像，但同时出于某种原因将其切断，即使图像及其父容器上的溢出滚动属性也是如此。

【解决方案4】：

在.mobile-hires 类中，您可以设置width: 100%。你也可以使用max-width: 100%。

【讨论】：