使fancybox缩小图像而不是裁剪它答案

【问题标题】：Make fancybox scale the image down rather than cropping it使fancybox缩小图像而不是裁剪它
【发布时间】：2014-11-18 16:17:35
【问题描述】：

我有一个基本的 Wordpress 网站，帖子显示在首页上。当您单击帖子时，它会弹出一个花式框模式，这会使用 single.php 模板显示帖子。这只会显示完整大小的帖子缩略图，可能还有说明。

除了只能伸展到 600 像素宽的花式框之外，这一切都有效。我找不到这个 600 数字的来源，据我提供的选项来看，它应该缩小图像以适应屏幕。

一些选项包括：

        width     : 1000,
        height    : 600,
        minWidth  : 100,
        minHeight : 100,
        maxWidth  : 1000,
        maxHeight : 9999,
        pixelRatio: 1, // Set to 2 for retina display support

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

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

        scrolling : 'no', // 'auto', 'yes' or 'no'
        wrapCSS   : '',

        arrows     : true,
        closeBtn   : true,

...但我似乎尝试了所有这些组合，但效果甚微或没有效果。

有谁知道这 600 是从哪里来的，或者为什么它会恢复到那个大小？

这是网站...http://www.marcoshype.com/

这是单个帖子的示例，它将在模态http://www.marcoshype.com/photography/no-faking/中

提前感谢您的帮助

【问题讨论】：

fancybox 不会裁剪图像，但会自动缩放它们如果您的目标是图像文件类型。在您的特定情况下，您打开的不是image 类型的内容，而是iframe（单个帖子），并且您的fancybox 初始化设置有这个'width': 600，所以难怪。

标签： jquery html css wordpress fancybox

【解决方案1】：

您的网页来源的第 113-129 行：

$(document).ready(function() {

    $("a.fancybox").fancybox({
        'width'              :  600, 
        'height'             :  800,
        'overlayOpacity'     :  '0.4',
        'overlayColor'       :  '#000',
        'hideOnContentClick' :   false,
        'autoScale'          :   false,
        'transitionIn'       :   'elastic',
        'transitionOut'  :   'elastic',
        'type'           :   'iframe'
    });

    $(".grid_9").find("a").fancybox();

  });

【讨论】：