fancyBox v3.2.11：如何使不同尺寸图片在iframe中居中

嘿，我来帮你搞定这个图片不居中的问题！看了你的代码和效果情况，发现你是通过iframe加载包含图片的HTML片段，但不管是iframe本身的布局还是内部内容的样式，都没做居中处理，所以图片才会偏在一边。下面给你几个实用的解决方案：

方案一：给iframe内部内容加居中样式 #

既然你要在iframe里放图片，那可以直接给iframe里的HTML片段套个带居中样式的容器，让图片自动居中。修改你的代码如下：

$.fancybox.open([ 
  { 
    src : '<div style="display:flex;justify-content:center;align-items:center;height:100vh;margin:0;"><a href="你的图片地址"><img src="你的图片地址" style="max-width:100%;max-height:100%;"/></a></div>' 
  }, 
  { 
    src : '<div style="display:flex;justify-content:center;align-items:center;height:100vh;margin:0;"><a href="你的图片地址"><img src="你的图片地址" style="max-width:100%;max-height:100%;"/></a></div>' 
  } 
],{ 
  type: 'iframe', 
  iframe: { 
    preload: false, 
    tpl: '<iframe id="fancybox-frame" name="fancybox-frame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>', 
    css: {"width":"1200px", "height":"100vh"}, // 给iframe设满视口高度，让内部居中生效
    attr: { 
      scrolling: "auto" 
    } 
  } 
});

这里的关键改动：

• 用flex布局的div包裹图片，设置水平+垂直居中，容器高度占满整个视口
• 给图片加max-width和max-height，避免图片撑破容器
• 给iframe的css加上height:100vh，确保iframe有足够高度让内部布局生效

方案二：直接用fancyBox的图片类型（更推荐！） #

其实你完全没必要用iframe来展示图片呀～fancyBox本身就专门支持图片展示，会自动帮你处理居中、缩放、自适应这些细节，代码还更简洁：

$.fancybox.open([
  {
    src: "你的图片地址",
    type: "image"
  },
  {
    src: "你的图片地址",
    type: "image"
  }
], {
  // 可以加一些图片相关的配置，比如导航按钮、缩放功能
  buttons: ["zoom", "slideShow", "fullScreen", "thumbs", "close"],
  image: {
    preload: true
  }
});

这个方案最符合fancyBox的设计初衷，你不用手动调任何居中样式，插件就会自动把图片完美居中，还支持各种交互功能，体验比iframe好太多啦！

方案三：修改fancyBox的弹窗容器样式（适合必须用iframe的场景） #

如果你因为某些原因一定要用iframe，那也可以通过修改弹窗的全局样式来让iframe居中：
先在你的页面CSS里加这段样式：

.fancybox-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fancybox-iframe {
  height: 100% !important;
  width: auto !important;
}

然后调整你的iframe配置，去掉固定宽度，让它自适应内容：

iframe: {
  preload: false,
  tpl: '<iframe id="fancybox-frame" name="fancybox-frame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',
  css: {}, // 删掉固定宽度的设置
  attr: {
    scrolling: "auto"
  }
}

这样弹窗内部会用flex布局让iframe居中，iframe也会自适应内容大小，内部图片就能正常显示了。

内容的提问来源于stack exchange，提问作者LIN YU