Question

Im looking to open a popup window which will contain an image.

Im already using:

$(document).height();
$(document).width();

To set the width and height of the pop-up window so it fills as much of the screen as possible. How can I then work out the best height and width of the image so that the image does not produce scrollbars in the popup window?

Answer 1

This is simple
(HTML)

<div style="height: 200px; width: 200px; border: 1px solid #000"><img src="http://icons.iconarchive.com/icons/fasticon/fruits/128/banana-icon.png" /></div>

(JS)

var img = $('img'), div = $('div'), aspectRatio = img.width() / img.height(), newheight = div.height()*aspectRatio, newwidth = newheight*aspectRatio;
if (newwidth > div.width()) { var newwidth = div.width()*aspectRatio, newheight= newwidth *aspectRatio; }
img.height(newheight); img.width(newwidth);