How can we Auto display images to their full size but not larger than 80% window



We allow members to upload Photos to attach to their notes.
These Photos can be of course all sort of dimensions.
What we want is when they click on the Tumbnail of these photos for the Photo to stretch
to the full dimensions of the actual Photo, but to a Max of 80% of window height and width.
FYI, the full size photos will be displayed in a position: fixed DIV floating center of the screen.
How can we best achieve this? To be exact:
1- Stretch the Video from 0 to Max Width & Hight in say about 1 Second?
2- Limit the display to actual dimensions of the photo but to Max 80% of Window height and width?



Have you tried loading your images in a lightbox? That would allow you control how large they display.


Well you could say we want to write our own LightBox type display.
So we like to have the actual JS code that makes this sort of flexible image display possible.



If you're looking for help with the JS, then this belongs in the JS forum. Would you like it moved there?


You could experiment with setting max-width or max-height settings on your images using the "viewport" units: vw, vh, vmin & vmax. Though you may get by just using standard percentages.
Though a unit like vmin may be useful as it takes account of either the height or width of the viewport, whichever is smallest.


There are hundreds of lightbox scripts out there so it seems like unnecessary work to re-invent the wheel as such.

This type of task is best carried out via scripting because you don't want all the full size image being loaded until requested and most of the light box scripts have all those facilities built in.

Here is a CSS only version using :target but the downside is that the images need to be loaded inside the page to start with.

However the placement effect may be of use to you.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.