响应式灯箱答案

【问题标题】：Responsive Lightbox响应式灯箱
【发布时间】：2013-07-02 18:32:43
【问题描述】：

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

图片和内容是这样浮动的：

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

并且浮动被清除，屏幕尺寸通过媒体查询减小。

我制作了一个 jsfiddle 来帮助理解我要解释的内容：

jsFiddle

尝试调整 iframe 的大小以查看效果。

【问题讨论】：

上一个问题中没有回答的问题到底是什么？
跨浏览器解决方案。
我找到了 IE6 的最大高度/宽度的解决方法，我认为这对您有用，请查看更新的答案
您希望支持多旧的浏览器？这在哪些浏览器上不起作用？

标签： jquery css responsive-design

【解决方案1】：

最好的方法是jqueryUI resize。

如果你想让你的 div（容器）随着窗口大小而改变，你应该这样做：

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

【讨论】：

【解决方案2】：

Working Example

我想我已经解决了兼容性问题并将最大高度设置为 300 像素，并为 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 */
    }
}

【讨论】：

【解决方案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。

【讨论】：

【解决方案4】：

我不确定我是否理解了整个问题，但这就是您垂直和水平居中图像的方式：

演示：http://jsbin.com/ukowar/1/edit

结合margin:auto通过绝对位置居中

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

希望对您的部分问题有所帮助。

【讨论】：