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

Question

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

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

现在这是我当前的设置：

索引.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 选项：

    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;
    }