jquery – 响应式弹出窗口

我正在使用Magnific Popups ajax popup创建一个类似于Instagram的弹出式体验(左侧图片,右侧评论等).我试图弄清楚如何使左右内容框始终保持相同的高度.如果右侧的图像太大,它将恰好适合div,因为它应该是响应的.此外,如果整个浏览器变小(可能在移动设备上),图像将显示在顶部,内容显示在底部.

图像和内容如下：

.image_container,.content {
    width: 50%;
    float: left;
}

并且只需使用媒体查询减少屏幕大小即可清除浮动.

我已经做了一个jsfiddle来帮助理解我想要解释的内容：

jsFiddle

如果您点击“打开”并调整iframe的大小,您将看到我想要的效果.

那么视图容器如何设置大小,左右内容区域的高度始终相同？只是看一下这个例子就可以看出它看起来有点滑稽了.

编辑

我也试过垂直居中图像,这似乎也是一个挑战.我已经尝试让css显示一个表格单元格,然后尝试vertical-align：middle但是这并没有结束.

该解决方案应适用于所有现代浏览器.

最佳答案

你在找这样的吗？
http://jsfiddle.net/d7hA5/

考虑以下功能：

// Handles the resize event
$(window)
    .off(".resizeImage")
    .on("resize.resizeImage",fnResizeImage);

// Resizes the content2 to fit with image height
function fnResizeImage (e) {
    var imgHeight = $('div.image_container > img').outerHeight(true);
    var cnt1Height = $('div.content > div.content1').outerHeight(true);
    var cnt2 = $('div.content > div.content2').outerHeight(imgHeight - cnt1Height);
}

另外建议看一下插件文档：Magnific-popup API