jQuery Mobile Docs - Popup images

# Popup images

Home Search
Back to Popups

## Scaling images: Lightbox examples

The framework CSS contains rules that make images that are immediate children of the popup scale to fit the screen. Because of the absolute positioning of the popup container and screen, the height is not adjusted to screen height on all browsers. You can prevent vertical scrolling with a simple script that sets the `max-height` of the image.

In the two examples below the divs with `data-role="popup"` have a class of `photopopup`.

Photo landscape Photo portrait
Close
Close

The handler is bound to the `popupbeforeposition` event, which ensures the image is not only scaled before it is shown but also when the window is resized (e.g. orientation change). In this code example the height is reduced by 60 to take a top and bottom tolerance of 30 pixels into account.

    $( document ).on( "pageinit", function() {
        $( ".photopopup" ).on({
            popupbeforeposition: function() {
                var maxHeight = $( window ).height() - 60 + "px";
                $( ".photopopup img" ).css( "max-height", maxHeight );
            }
        });
    });

### More in this section

- Pages & Dialogs
- Anatomy of a page
- Single page template
- Multi-page template
- Page titles
- Linking pages
- Page transitions
- Page loading widget
- Dialogs
- Popups
- Prefetching & caching pages
- Ajax, hashes & history
- Dynamically Injecting Pages
- Scripting pages
- PhoneGap apps
- touchOverflow feature
- Theming pages