响应灯箱

Question

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

图像和内容如下：

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

只需使用媒体查询减少屏幕尺寸，即可清除浮动。

我已经帮助了解了我想要解释的内容：

jsFiddle

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

Answer 1

最好的方式是jqueryUI resize。

如果你想要你的div（容器）会按窗口大小改变你应该这样做：

$(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 polyfill。

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

希望这有助于解决部分问题。