我在移动设备上观看时使用模态显示大型res图像。这样,用户可以选择是否加载较大的文件以及更详细地检查图像。
您可以在移动https://glewindesign.com/project_1.html
上看到有问题的网页第一个问题是我的图像比模态容器以及视口大。我想用滚动条这样做,这样用户就可以用手指移动并检查全尺寸图像,无需捏合/缩放。
因为图像较大,但我无法将其居中。无论我尝试什么CSS中心技巧,它总是加载在图像的左上角。
第二个问题是焦点没有被恰当地困在模态中。
当我滚动浏览高分辨率图像时,有时用户会与模态后面的区域进行交互时出现故障?当我快速向下滚动时,我会注意到它。有时会出现固定的页脚菜单。
我使用了本教程
https://css-tricks.com/considerations-styling-modal/
并且正在利用我认为会阻止与模态背后元素交互的叠加层,但就像我说的那样我仍然会遇到固定页脚有时出现的问题。
对此有任何建议将不胜感激!
答案 0 :(得分:0)
在EntityFrameworkDataProvider
课程中,您可以设置.mobile-hires
。您也可以使用width: 100%
。
答案 1 :(得分:0)
保存模态内容的容器需要将overflow属性设置为滚动。它还需要具有max-width属性,其值小于图像分辨率。然后,图像将滚动。
答案 2 :(得分:0)
位置:固定 最高:50% 左:50% transform:translate(-50%, - 50%);添加到.mobile-hires
答案 3 :(得分:0)
所以我想要实现的目标实际上不可能使用CSS。您可以使小于包含块的图像居中,但是您不能将图像放在比其包含块大的图像中心,因为它只是位于块的左上角。我需要实现一些javascript来定位滚动条,使图像出现在中心。