6

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

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

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

并且使用媒体查询减小了屏幕尺寸，浮动刚刚被清除。

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

jsFiddle

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

4

4 回答 4

2

最好的方法是jqueryUI resize。

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

$(window).resize(function() {
    var docheight = $(document).height();
    $("#container").height(docheight);
});
于 2013-07-04T18:14:28.883 回答
2

工作示例

我想我已经解决了兼容性问题并将最大高度设置为 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 */
    }
}
于 2013-07-08T16:03:21.703 回答
1

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

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

通过绝对位置与结合margin:auto

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

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

于 2013-07-14T08:29:32.170 回答
1

有一种方法可以使用纯 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。

于 2013-07-09T01:27:56.560 回答