響應式燈箱

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; 
} 

希望能幫助您解決部分問題。