如何在图像的宽度上制作花式框标题？

Question

现在fancybox-caption 的宽度是 100%

如何在图片的宽度上制作一个fancybox-caption？

代码 - Codepen

$('[data-fancybox="images"]').fancybox({
  idleTime: false,
  baseClass: 'fancybox-custom-layout',
  margin: 0,
  gutter: 0,
  infobar: false,
  thumbs: {
    hideOnClose: false,
    parentEl: '.fancybox-outer'
  },
  touch: {
    vertical: false
  },
  buttons: [
    'close',
    'thumbs',
    'share'
  ],
  animationEffect: "fade",
  animationDuration: 300,
  onInit: function(instance) {
    // Create new wrapping element, it is useful for styling
    // and makes easier to position thumbnails
    instance.$refs.inner.wrap('<div class="fancybox-outer"></div>');
  },
  caption: function(instance, item) {
    return '<h3>Caption</h3>';
  }
});

.fancybox-custom-layout .fancybox-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: #f7f7f7;
  color: #000;
  padding: 15px;
}

.fancybox-custom-layout .fancybox-caption h3 {
  margin: 0;
}

.fancybox-custom-layout .fancybox-caption:before,
.fancybox-custom-layout .fancybox-caption:after {
  background: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet" />


<a href="https://source.unsplash.com/ndjyaOp0fOc/1600x900" data-fancybox="images" data-type="image">
  <img src="https://source.unsplash.com/ndjyaOp0fOc/240x160" />
</a>

谢谢。我很乐意为您提供任何帮助

Answer 1

它只是不能那样工作。你为什么想要那个？ 1）滑动或缩放时看起来很奇怪； 2）如果字幕内容很长并且图像是垂直的怎么办？看起来很奇怪； 3) 你想过它在 modibe（小屏幕）设备上的样子吗？同样，它看起来很奇怪。