怎么做比例适合我的情况？

Question

我正在尝试创建一个功能，当用户单击图像时，div将弹出并根据图像的大小设置动画以适合整个浏览器窗口。

这将是

 -----------------
|                 |
|      img1       |
|          img2   |
 -----------------

点击ima2

后

 -----------------
|                 |
| image2 contents |
|                 |
 -----------------

单击img2时，将弹出包含内容的div并设置动画以适合整个浏览器可查看的屏幕。我正在考虑使用css转换来做这个，但我不知道如何启动以及如何锁定图像内容的位置。任何人都可以给我一些提示吗？非常感谢！

Answer 1

你的意思是FIDDLE吗？

JS

var $dialogpopup = $( ".hiddenimagediv" ).dialog({
                  autoOpen: false,
                  height: 'auto',
                  width: 'auto',
                  position: {my: "top middle",
                             at: "top middle",
                             of: ".imagediv"},
                  title:"Your Picture"});

$('.imagediv').click(function(){
                               $dialogpopup.dialog('open');
                               });

您可以移除上方栏，播放格式等

Answer 2

如果你想缩放页面上的图像，我最近建立了一个处理这个问题的脚本：

https://github.com/kthornbloom/Smoothzoom

Answer 3

我过去使用的是Nivo Lightbox，设置非常简单。它基本上只是一个页面上的弹出窗口，显示内容的图像，图库甚至视频覆盖（带叠加）。
http://dev7studios.com/plugins/nivo-lightbox/

我知道这只是众多其他灯箱中的一个，但这个灯箱对我来说非常棒。