Question

有谁知道如何打开具有特定宽高比的可调整大小的fancyBox（例如16：9）？

Answer 1

没有一种本地方式可以轻松调整Fancybox的大小。您可以使用 screen.height 进行一些简单的数学计算，以相对于当前屏幕分辨率的特定宽高比打开Fancybox。

var height = screen.height/4;

$("#test").fancybox({
           'width' : 16/9. * height,
           'height' : height,
           'autoDimensions' : false
      }); 
});

Answer 2

还有纯CSS解决方案。它甚至在您调整大小时也能正常工作。

.fancybox-type-iframe .fancybox-inner{
    padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */
    height: 0 !important;
}

.fancybox-type-iframe .fancybox-inner .fancybox-iframe{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
}

我假设您需要使用fancybox显示的视频。因此与iframe相关的css。

P.S。我知道这个帖子已经过时了。但也许有人仍然需要一个解决方案。

Answer 3

这是一个纯粹的css解决方案，适用于与Fancybox 3一起使用的响应式youtube弹出窗口。它是用scss写的清晰度，但如果你不熟悉scss，可以在线转换为css。

.fancybox-slide--iframe {

    .fancybox-content{
        margin: 0!important;
        max-width: 100%;
        width: 100%;
        padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */
        height: 0 !important;

        /* don't go full width on wide screens */
        @media all and (min-width: 800px) {
            max-width: 70%;
            width: 70%;
            padding-top: 39.34%;  /* (9/16 * 70%) -- smaller aspect ratio in percents */
        }

        .fancybox-iframe{ 
            position: absolute; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0;
        }

    }
}

Answer 4

AFAIK，Fancybox现在不支持这个。但是，您可以控制花式框尺寸的尺寸

("#yourbox").fancybox({
    'width'             : 680,
    'height'             495,
    'showCloseButton'   : false,
    'titlePosition'     : 'inside',
    'titleFormat'       : formatTitle
});

打开具有特定宽高比的fancyBox

4 个答案: