打开具有特定宽高比的fancyBox

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。

PS我知道这个帖子已经很旧了。但也许有人仍然需要解决方案。