- Issue created by @nofue
- 🇮🇳India ravi kant Jaipur
We change the zoom effect for mobile devices as in the example https://www.jqueryscript.net/demo/image-pan-zoom-hover/
Elevation Image Zoom ('image') works fine with wide screens. Not so much when screens get narrow, as it is the case with f.e. mobile phones.
Set up a (bootstrap) container with a grid of 12 columns. The image is configured with an image style of "max. 650px" an "inner view". It is placed on the grid to use 6 columns, the left half of the browser window when the window is wider than 578px.
Once the window gets narrower than 1300px, the right column goes over the image on the left, which doesn't shrink. Once the width of the width of the browser window gets smaller than 578px, the image exceeds the space of its parent object, which causes two possible effects on a smart device: either only the left part of the image can be seen (which makes it hard to control the enlarged portion of the image), or the site is zoomed to allow for the full width of the image, minimizing the page text below readability.
The examples are screen shots of a small browser window on a wide screen:
Make sure the image honors the dimensions of the parent object.
Active
10.0
User interface
We change the zoom effect for mobile devices as in the example https://www.jqueryscript.net/demo/image-pan-zoom-hover/