The Zoomify Image Viewer supports Responsive Web Design (RWD) by automatically resizing with its container. No external JavaScript files are necessary. Resize this web page and the Zoomify Image Viewer will auto-resize to match.
To enable a responsive display simply set the size of the Viewer container in the web page using percent values rather than pixel values:
#myContainer { width:100%; height:100%;}
Note that the Viewer auto-resizing is not simply implemented as a display area resize. The Viewer zooms the display in or out to maintain the same scope of view of the image. In addition, the display is automatically updated to ensure tiles from the optimal tier are loaded and scaled for maximum clarity. (It is also worth noting that the resizing effect is timed to occur every 10 milliseconds as the user resizes the page rather than on every browser resize event to optimize performance.)
Additional Notes: as an alternative to %s, the newer ‘vw’ and ‘vh’ options are also supported:
#myContainer { width:100vw; height:100vh; }
Important: if nothing is in the web page other than the Zoomify Image Viewer the following line is needed in the <head> area of the page:
<style> html, body { height: 100%; width: 100%; margin: 0; } </style>
Auto-resizing can be blocked with this HTML parameter setting: zAutoResize=0
For developers integrating the Zoomify Image Viewer into a larger JavaSript project, two functions will be helpful, the first to force the Viewer to auto-resize to match its container whenever desired, and the second to specificaly set the size of the Viewer:
Z.Viewer.autoResizeViewer(); OR Z.Viewer.resizeViewer(w, h, Z.Viewport.getZoom());
Finally, note that there is not a simple way (such as a browser event) to determine when the browser maximize button is clicked. Because of this, no auto-resize will occur. This limitation is being investigated.