Duyarlı Işık Kutusu

Question

Magnific Popups ajax popup kullanıyorum ya da Instagram gibi bir pop-up deneyimi yaratmak için Facebook (soldaki görüntü, sağdaki yorumlar vb.). Işık kutusunun tamamı için maksimum bir yükseklik ayarlamayı ve görüntüyü dikey olarak ortalayabildiğinde nasıl ortalayayım? Bu, tüm tarayıcılarda çalışmalı ve zor olan yanıt vermelidir. Tüm tarayıcılarda düzgün çalışmasını sağlayamıyorum. Sanırım bir jQuery çözümüne ihtiyacım yok çünkü ihtiyacım olan şey bu.

görüntü ve içerik gibi süzülüyor gibidir:

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

Ve şamandıra sadece medya sorguları kullanılarak indirgenir ekran boyutu ile temizlenir.

Bir jsfiddle ben açıklamaya çalışıyorum anlamak yardımcı olmak için yaptık:

jsFiddle

deneyin etkisini kontrol etmek iframe yeniden boyutlandırma.

Answer 1

en iyi yol jqueryUI resize olacaktır.

Eğer div (konteyner) windows tarafından değişeceğini isterseniz

böyle somesing yapmalıdır boyutu:

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

Answer 2

Working Example

ben uyumluluk dışarı çalıştık düşünüyorum sorunları ve IE6 için bir geçici çözüm ile maksimum 300px yükseklik ayarlayın.

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

böyle pop-up ve modal kutuları gibi saf CSS3 dönüşümleri kullanılarak sayfanın ortasında bir öğe yerleştirmek için bir yolu var.

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

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

tarayıcı satıcı önekleri (örneğin -webkit- ve -moz-) tüm unutmayın. Ayrıca eski tarayıcıların (IE9 veya aşağısı) transform'u tanımayacağını da unutmayın. Onlar için bir JavaScript çok dolgusuna ihtiyacınız olacak.

Answer 4

Ben bütün soru anladım emin değilim ama bu nasıl dikey ve yatay olarak merkez görüntüleri:

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

ile birlikte mutlak pozisyonu yoluyla Merkezleme margin:auto

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

Sorununuzun bir parçası olan yardımcı olur.