响应式灯箱

Question

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

的图像和内容被浮置为这样：

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

和浮子只是与屏幕尺寸清零使用媒体查询降低。

我做了一个的jsfiddle，以帮助了解什么，我试图解释：

jsFiddle

尝试重新调整大小的iframe来检查出来的效果。

Answer 1

最好的办法是jqueryUI resize。

如果你想你的div（容器）将通过窗口更改

大小，你应该做的somesing这样的：

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

Answer 2

Working Example

我想我已经制定了兼容性问题并设置300px的最大高度，并为IE6提供解决方法。

JS：

$(document).ready(function() { 
    $('.popup-with-zoom-anim').magnificPopup({ 
     type: 'inline', 

     fixedContentPos: false, 
     fixedBgPos: true, 

     overflowY: 'auto', 

     closeBtnInside: true, 
     preloader: false, 

     midclick: true, 
     removalDelay: 300, 
     mainClass: 'my-mfp-zoom-in' 
    }); 
}); 

// Handles the resize event 
$(window).resize(fn_resizeImage); 
$('.popup-with-zoom-anim').click(fn_resizeImage); 
// Resizes the content2 to fit with image height 
function fn_resizeImage() { 
    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); 
} 

CSS：

img { 
    width: 300px; 
} 
.view_container { 
    max-height:100%; 
    max-width: 850px; 
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto"); 
    /* sets max-width for IE6 */ 
    margin: 20px auto; 
    background-color: #1C1C1C; 
    padding: 0; 
    line-height: 0; 
    border: 1px solid red; 
} 
.image_container, .content { 
    width: 50%; 
    float: left; 
} 
.image_container img { 
    max-height:300px; 
    _height:expression(this.scrollWidth > 300 ?"300px" :"auto"); 
    /* sets max-width for IE6 */ 
    max-width: 100%; 
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto"); 
    /* sets max-width for IE6 */ 
} 
.image_container { 
    text-align: center; 
} 
.content1, .content2 { 
    background-color: #fff; 
    padding: 1em; 
} 
.content { 
    line-height: 1.231; 
} 
.content2 { 
    height: 300px; 
    overflow-y: scroll; 
} 
#small-dialog { 
    max-width: 850px; 
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto"); 
    /* sets max-width for IE6 */ 
    margin: 20px auto; 
    background-color: #1C1C1C; 
    padding: 0; 
    line-height: 0; 
    border: 1px solid red; 
} 
@media (min-width: 1px) and (max-width: 638px) { 
    .image_container, .content { 
     width: auto; 
     float: none; 
     clear: both; 
    } 
    .image_container img { 
     max-height:150px; 
     max-width:150px; 
     _height:expression(this.scrollWidth > 150 ?"150px" :"auto"); 
     /* sets max-width for IE6 */ 
     _width:expression(this.scrollWidth > 150 ?"150px" :"auto"); 
     /* sets max-width for IE6 */ 
    } 
} 

Answer 3

有一种方法使用纯CSS3转换，如弹出式广告和模态框的页面的中间定位的元素。

<div id="myelem"></div>

#myelem { width: 500px; height: 400px; position: fixed; top: 50%; left: 50%; background: red; transform: translate(-50%, -50%); }

不要忘记所有的浏览器供应商前缀（如-webkit-和-moz-）的。另外请记住，旧版浏览器（IE9或更低版本）根本不会识别transform。您需要为他们添加JavaScript填充。

Answer 4

我不知道我的理解整个问题，但你这是怎么垂直和水平中心图片：

演示：http://jsbin.com/ukowar/1/edit

通过组合绝对位置为中心与margin:auto

img { 
    width:200px; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
} 

希望能帮助您解决部分问题。