响应灯箱

Question

我正在使用Magnific Popups ajax popup创建一个类似于Instagram或Facebook的弹出式体验(左侧图片,右侧评论等).我如何设置整个灯箱的最大高度,并使图像在垂直居中时居中？这需要在所有浏览器中工作,并且必须具有响应性,这很棘手.我似乎无法让它在所有浏览器中正常工作.我想我不介意jQuery解决方案,因为这是我可能需要的.

图像和内容如下:

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

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

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

的jsfiddle

尝试重新调整iframe的大小以检查效果.

Answer 1

最好的方法是jqueryUI resize。

如果你希望你的 div（容器）会根据窗口大小而改变，你应该这样做：

$(window).resize(function() {
    var docheight = $(document).height();
    $("#container").height(docheight);
});