0

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.

You can see the webpage that has the problem on mobile 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.

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/

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!

Argalo
  • 1
  • I have been searching for other people trying to center a large scrollable image in a modal and tried the suggestions in this thread https://stackoverflow.com/questions/14562457/center-oversized-image-in-div still no luck though, even if it does move the image within its parent container it seems to cut off part of the image. – Argalo Feb 17 '18 at 10:49

4 Answers4

0

Within the .mobile-hires class you can set width: 100%. You can also use max-width: 100%.

1000Nettles
  • 2,314
  • 3
  • 22
  • 31
Patel Akshay
  • 28
  • 3
  • I have tried changing these properties but that just auto sizes the image to 100% of the viewport. As it is right now the size is correct, with the large image and scrolling enabled, its just I want it to be centered within the viewport when opened. – Argalo Feb 17 '18 at 10:35
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.

ketchupisred
  • 661
  • 3
  • 16
  • The modal container holding the image has the overflow property set to scroll. The max width is less than the image resolution. The image scrolls as you can see, but it is still not centered. I would like to have the scrollable image to be centered within the viewport when opened. I tried adding this margin-left: 50%; transform: translateX(-50%); That does change the position and seemingly center the image, but it cuts it off for some reason at the same time, even with the overflow scroll property on the image and its parent containers. – Argalo Feb 17 '18 at 10:37
0

position: fixed top: 50% left: 50% transform: translate(-50%, -50%); add to .mobile-hires

Patel Akshay
  • 28
  • 3
  • I changed those settings and although it did force the image to be centered there is no scroll mechanism to let you see images that are shifted out to the left or above the top. It sounds like I might need to use javascript to position the scrollbar positions 50% vertically horizontally when the modal image is opened? – Argalo Feb 18 '18 at 01:45
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.

Argalo
  • 1