Hộp đèn đáp ứng

Question

Tôi đang sử dụng Magnific Popups ajax bật lên để tạo trải nghiệm bật lên giống như Instagram hoặc Facebook (hình ảnh bên trái, nhận xét ở bên phải, v.v.). Làm thế nào tôi sẽ đi về thiết lập một chiều cao tối đa cho toàn bộ lightbox và trung tâm hình ảnh khi nó có thể được tập trung theo chiều dọc? Điều này cần phải làm việc trong tất cả các trình duyệt và phải được đáp ứng đó là khó khăn. Tôi không thể làm cho nó hoạt động bình thường trên tất cả các trình duyệt. Tôi cho rằng tôi không quan tâm đến giải pháp jQuery vì đây là những gì tôi có thể cần.

Những hình ảnh và nội dung đang nổi như vậy:

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

Và phao chỉ được xóa với kích thước màn hình được giảm sử dụng các truy vấn phương tiện truyền thông.

Tôi đã thực hiện một jsfiddle để giúp hiểu những gì tôi đang cố gắng để giải thích:

jsFiddle

Hãy thử lại kích thước khung nội tuyến để kiểm tra hiệu lực.

Answer 1

cách tốt nhất sẽ là jqueryUI resize.

nếu bạn muốn điều đó div của bạn (container) sẽ thay đổi bởi các cửa sổ kích thước bạn nên làm somesing như thế:

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

Answer 2

Working Example

Tôi nghĩ rằng tôi đã làm việc ra khả năng tương thích vấn đề và thiết lập một chiều cao tối đa 300px, với một giải pháp cho 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

Có một cách để xác định vị trí một thành phần ở giữa của trang sử dụng biến đổi hoàn toàn CSS3, chẳng hạn như đối với các quảng cáo và hộp phương thức.

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

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

Đừng quên tất cả các tiền tố nhà cung cấp trình duyệt (như -webkit- và -moz-). Cũng nên nhớ rằng các trình duyệt cũ hơn (IE9 trở xuống) sẽ không nhận ra được transform. Bạn sẽ cần một polyfill JavaScript cho chúng.

Answer 4

Tôi không chắc chắn tôi hiểu toàn bộ câu hỏi nhưng đây là cách bạn theo chiều dọc và chiều ngang trung tâm hình ảnh:

Demo: http://jsbin.com/ukowar/1/edit

Định tâm qua vị trí tuyệt đối kết hợp với margin:auto

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

Hy vọng rằng sẽ giúp với một phần của vấn đề của bạn.