Question

我正在尝试使用相同的用户界面来预览Facebook上的图像我有一个单独的视图，我在fancybox中显示必须是我在最大/最小宽度/高度上犯了同样的错误。基本上我看到注释div总是应该是340px宽度。并且图像div可根据图像大小调整大小。在下面的图像中，我使用更宽的图像来更好地显示问题。我像这样加载它：

$(document).ready(function () {
        $('.fancybox').fancybox({
            'autoSize': true,
            'autoDimensions': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'hideOnOverlayClick': false,
            'hideOnContentClick': false,
            'closeBtn': false,
            'type': 'ajax',
            'padding': 0, 
            'margin': 0,                        
            'minWidth': 500,
            'fitToView': true
        });
    });

加载视图很好。内部视图代码是：

<div style="height: 610px; width: 1100px;">
    <div style="float: left; max-width: 510px;">
        <img style="max-height: 100%;" src="http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/393726_2631619232954_1329592446_32973068_1109612286_n.jpg" />
    </div>
    <div style="float: right; width: 340px; height: 100%; background: #ff0000;">
        <h3>
            Description</h3>
    </div>
</div>

这就是我现在得到的： enter image description here 这就是我想要得到的：

更新基于@ S.Visser答案的较小图像问题。 enter image description here

Answer 1

这可能需要一些自定义工作，但您可以考虑我的＆＃34; a la ＆＃34; facebook方式（使用fancybox v2.x）：

http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html

顺便说一句，您在脚本中包含了fancybox v1.3.x和v2.x的API选项。 v2.x中的Fancybox选项是新的，与旧版本不兼容。

Answer 2

在这个例子中，我使用表hack来使图像居中。最大宽度和高度是为了确保图像不会变大。

HTML

<div id="popup-container">

    <div class="image">
          <img src="http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/393726_2631619232954_1329592446_32973068_1109612286_n.jpg" alt="" />
    </div>

    <div class="description">
        <h3>Description</h3>
    </div>

    <div class="clear"></div>

</div>

CSS

#popup-container {
    height: 610px;
    width: 1100px;
    display: table;
}

#popup-container .image {
    display: table-cell;
    vertical-align: middle;
    background-color: #000;
}

#popup-container .image img {
    max-height: 100%;
    max-width: 760px;
}

#popup-container .description {
    width: 340px;   
    background-color: #FFF;
    height: 610px;
}

.clear {
    clear: both; 
}

输出： Output

Fancybox内容大小问题

2 个答案:

HTML

CSS