Full screen image zoomed mobile
Hi guys. I have a website which is not too mobile friendly yet. It is wider than the screen so it is zoomed out all the time. (I know I know, but this is the starting situation we have 🙂 )
I need a code to view images in a full screen overlay when they are clicked. I tried max-width/height: 100vw 100vh, but they are calculated based on the 100% zoomed version so the pictures are getting too small in the zoomed out state.
Is there any solution to make a full screen img/div base on the vw and the zoom state?
Thank you for your help in advance. I hope I made an appropriate question since this is my first time. 🙂
3 Replies
If the user is zoomed out, under 100%, you want it to zoom out and look smaller ? For accessibility
Make the rest of the website mobile and your problem should go away
Sure, but this is not an option now.
A basic view on mobile is something zoomed out, because of the too wide content.
I woulf like to display a full screen image in this state
with vw/vh 100. It looks like as the attached pic