I am using a modal to display large res versions of images when viewing on mobile. This way the user can choose whether to load the larger file as well as examine the image in more detail.
我在移动设备上查看时使用模态显示大型res图像。这样，用户可以选择是否加载较大的文件以及更详细地检查图像。
You can see the webpage that has the problem on mobile https://glewindesign.com/project_1.html
您可以在移动设备https://glewindesign.com/project_1.html上看到有问题的网页
The 1st issue is that my image is larger than the modal container as well as the viewport. I want it that way with the scroll bars so the user can just use their finger to move around and examine the full size image, no need to pinch/zoom.
第一个问题是我的图像比模态容器以及视口大。我想用滚动条这样做，这样用户就可以用他们的手指四处移动并检查全尺寸图像，无需捏合/缩放。
Because the image is larger though, I am having trouble centering it. No matter what CSS centering tricks I try, it always loads at the top left of the image.
因为图像虽然较大，但我很难将它居中。无论我尝试什么CSS中心技巧，它总是加载在图像的左上角。
The 2nd problem is focus not being properly trapped in the modal.
第二个问题是焦点没有被正确地困在模态中。
When I am scrolling through the high res image, sometimes there is a glitch where the user interacts with the area behind the modal? I notice it when I quickly scroll downwards. Sometimes the fixed footer menu will appear.
当我滚动高分辨率图像时，有时会出现一个故障，用户与模态后面的区域进行交互？当我快速向下滚动时，我会注意到它。有时会出现固定的页脚菜单。
I used this tutorial
我用过这个教程
https://css-tricks.com/considerations-styling-modal/
https://css-tricks.com/considerations-styling-modal/
and am utilizing the overlay which I thought would prevent interaction with elements behind the modal, but like I said I still encounter the issue of the fixed footer appearing sometimes.
并且我正在利用我认为会阻止与模态背后的元素交互的叠加层，但就像我说的那样我仍然遇到有时会出现固定页脚的问题。
Any advice regarding this would be greatly appreciated!
任何有关这方面的建议将不胜感激！
4 个解决方案
#1
0
Within the .mobile-hires class you can set width: 100%. You can also use max-width: 100%.
在.mobile-hires类中，您可以设置宽度：100％。您还可以使用max-width：100％。
#2
0
The container that holds the modal content needs to have the overflow property set to scroll. It also needs to have a max-width property with a value that is less than the image resolution. Then, the image will scroll.
保存模式内容的容器需要将overflow属性设置为滚动。它还需要具有max-width属性，其值小于图像分辨率。然后，图像将滚动。
#3
0
position: fixed top: 50% left: 50% transform: translate(-50%, -50%); add to .mobile-hires
位置：固定顶部：50％左：50％变换：平移（-50％， - 50％）;添加到.mobile-hires
#4
0
So what I was trying to accomplish is not actually possible using CSS. You can centre an image that is smaller than the containing block but you can't centre an image that is larger than its containing block because it will just sit the top left of the block. I needed to implement some javascript that would position the scroll bars so the image appeared in the center.
所以我想要实现的目标实际上不可能使用CSS。您可以使小于包含块的图像居中，但是您不能将图像放在比其包含块大的图像中心，因为它只是位于块的左上角。我需要实现一些javascript来定位滚动条，使图像出现在中心。
#1
0
Within the .mobile-hires class you can set width: 100%. You can also use max-width: 100%.
在.mobile-hires类中，您可以设置宽度：100％。您还可以使用max-width：100％。
#2
0
The container that holds the modal content needs to have the overflow property set to scroll. It also needs to have a max-width property with a value that is less than the image resolution. Then, the image will scroll.
保存模式内容的容器需要将overflow属性设置为滚动。它还需要具有max-width属性，其值小于图像分辨率。然后，图像将滚动。
#3
0
position: fixed top: 50% left: 50% transform: translate(-50%, -50%); add to .mobile-hires
位置：固定顶部：50％左：50％变换：平移（-50％， - 50％）;添加到.mobile-hires
#4
0
So what I was trying to accomplish is not actually possible using CSS. You can centre an image that is smaller than the containing block but you can't centre an image that is larger than its containing block because it will just sit the top left of the block. I needed to implement some javascript that would position the scroll bars so the image appeared in the center.
所以我想要实现的目标实际上不可能使用CSS。您可以使小于包含块的图像居中，但是您不能将图像放在比其包含块大的图像中心，因为它只是位于块的左上角。我需要实现一些javascript来定位滚动条，使图像出现在中心。