响应灯箱

Question

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

图像和内容如下：

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

并且只需使用媒体查询减少屏幕大小即可清除浮动。

我已经做了一个jsfiddle来帮助理解我想要解释的内容：

的jsfiddle

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

Answer 1

最好的方法是jqueryUI调整大小 。

如果你想要你的div（容器）将根据窗口大小改变你应该像这样做：

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

Answer 2

工作实例

我想我已经解决了兼容性问题，并设置了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中心margin:auto

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

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