jquery - 打开弹出窗口和大小，然后在里面调整大小图像并保持宽高比

Question

我想打开一个包含图片的弹出窗口。

我已经在使用：

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

设置弹出窗口的宽度和高度，使其尽可能多地填充屏幕。然后，我如何计算出图像的最佳高度和宽度，以便图像不会在弹出窗口中产生滚动条？

Answer 1

这很简单 （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);