javascript - 将 fancybox-skin 设置为固定大小并将所有图像居中

Question

我使用的是 fancybox version: 2.1.3 我想做的是:

1. 将宽度和高度设置为固定的 600px x 400px。
2. 如果图片小于弹出框，请将其居中，不要调整大小。

现在这是我当前的设置:

index.html

$('.fancybox-buttons').fancybox({
    minWidth: 600,
    maxWidth: 600,
    minHeight: 400,
    maxHeight: 400,
    width: 600,
    height: 400,
    autoScale : false,
    fitToView : false,

jquery.fancybox.js

$.extend(F, {
// The current version of fancyBox
version: '2.1.3',

defaults: {
padding : 15,
margin  : 20,

width     : 600,
height    : 400,

minWidth  : 600,
minHeight : 400,

maxWidth  : 600,
maxHeight : 400,

autoSize   : false,
autoHeight : false,
autoWidth  : false,

autoResize  : false,
autoCenter  : !isTouch,
fitToView   : false,
aspectRatio : false,

结果是这样的: http://i.imgur.com/WX2ak.jpg但是当我点击下一步 http://i.imgur.com/1HXhe.jpg .. 你可以看到尺寸不固定，这是主要问题..

如果图像较小，弹出窗口和图像大小应该像这样，我想要什么

P/s : 这是我第一次尝试修改 fancybox 可能对我来说有点困惑。

Answer 1

我有“丑陋的方式”，但我没有更多时间寻找合适的选项组合。因此，添加 jquery-options:

    fitToView : false,
    wrapCSS: 'myclass'

并添加样式:

    .myclass, 
    .myclass .fancybox-skin 
    {
        width: 600px !important;
        height: 400px !important;
        text-align: center;
    }
    .myclass .fancybox-skin 
    {
        line-height: 400px;
    }
    .myclass .fancybox-outer {
        height: inherit;
        width: inherit;
    }
    .myclass .fancybox-inner {
        display: inline-block;
        vertical-align: middle;
    }