JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page">
    <div id="content" data-role="content"></div>
    <div data-role="popup" id="photo" data-overlay-theme="b" data-theme="b" data-corners="false">
        <a href="#" data-rel="back" data-role="button" data-iconpos="notext" data-icon="delete" class="ui-btn-right">Close</a>
        <a href="#" id="placeholder" title="Click to view full size"></a>
    </div>
</div>

CSS

.ui-popup-container {
    width: calc(100% - 40px);
}

.ui-popup-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

JavaScript

var photos = [{url: 'http://photos.codefactor.net/img/oriented.jpg',width:1280,height:960}];
$.each(photos, function(i,p){
    $('<a href="#photo" data-rel="popup" data-position-to="window">Click to see photo</a>').click(function(){
        var width = p.width, height = p.height;
        var ratio = width / height;
        var maxWidth = $(window).width() - 40;
        var maxHeight = $(window).height() - 40;
        if (width > maxWidth) {
            width = maxWidth;
            height = width / ratio;
        }
        if (height > maxHeight) {
            height = maxHeight;
            width = height * ratio;
        }
        var img = $('<img />').attr('src', p.url);
        $('#placeholder').attr('src', p.url).empty().append(img);
    }).appendTo('#content');
});