根据图像宽度更改fancybox上的填充答案

【问题标题】：Change padding on fancybox depending on image width根据图像宽度更改fancybox上的填充
【发布时间】：2013-04-12 18:43:57
【问题描述】：

我是 javascript 和 jQuery 的新手，我正在尝试使用 Fancybox 制作幻灯片。问题是我希望图像显示在相同大小的盒子上，无论它们是纵向还是横向图像。我的图像都是横向的 700 X 525 或纵向的 525 X 700。

我的方式是横向图像加载如下图顶部所示，纵向图像加载如下图所示，我希望纵向图像加载如下图所示，与风景相同尺寸的盒子：

我认为我应该做的是根据图像尺寸更改左侧填充，但我不知道如何。

提前感谢您的帮助。

我使用的是 Fancybox 版本：2.1.4，并且我已经设置了默认值：

        padding : 15,
        margin  : 20,

        width     : 800,
        height    : 600,
        minWidth  : 100,
        minHeight : 100,
        maxWidth  : 9999,
        maxHeight : 9999,

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

        autoResize  : true,
        autoCenter  : !isTouch,
        fitToView   : true,
        aspectRatio : false,
        topRatio    : 0.5,
        leftRatio   : 0.5,

【问题讨论】：

标签： fancybox width padding dimensions

【解决方案1】：

我知道这篇文章已有 11 个月的历史，但我想我会分享我的解决方案，以防将来对其他人有所帮助。

基本上，我在 fancybox 元素上设置了一个 min-width css 属性，并将其与当前图像宽度进行比较，如果它更小，我将向 fancybox 元素添加填充，以使 fancybox 元素保持相同的宽度，但里面的图片是水平居中的。

第 1 步：在你的 CSS 中为 fancybox 元素设置一个最小宽度。这是无论图像宽度如何，您都希望您的 fancybox 元素保持的宽度。

.fancybox-wrap { 最小宽度：1120px; }

第二步：调用fancybox时添加afterLoad函数

$(".fancybox").fancybox({ 
    afterLoad: function(current) {
        var $el = $(".fancybox-wrap").eq(0);    // grab the main fancybox element
        var getcurrwidth = current.width;       // grab the currrent width of the element
        var getdesiredwidth = $el.css('min-width'); // grab our min-width that we set from the css

        var currwidth = Number(getcurrwidth);
        var desiredwidth = Number(getdesiredwidth.replace('px', ''));


        if (currwidth < desiredwidth)
        {
            var custompadding = (desiredwidth - currwidth) * 0.5; // if the width of the element is smaller than our desired width then set padding amount
            this.skin.css({'padding-left': custompadding+'px', 'padding-right': custompadding+'px' }); // add equal padding to the fancybox skin element 
        }
    }
});

【讨论】：