Reveal.js的幻灯片带有拉伸的图像和顶层标题

时间:2019-05-19 12:23:16

标签: javascript css reveal.js

我正在尝试使用Reveal.js创建这种幻灯片:

Reveal.initialize({ });
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.8.0/js/reveal.min.js" integrity="sha256-pv4AarTAzSO6lz+bbMPwmV29XMjkzmFOn601b2pWqXE=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.8.0/css/reset.css" integrity="sha256-GqjoTJyry/5NlbGYef5IucLF5tVFdMvmebwi7bn+ErY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.8.0/css/reveal.min.css" integrity="sha256-OxiHrn+gXudPDHxTvXiQzeFjZU/FllSSPmOOYAZ1O/g=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.8.0/css/theme/black.css" integrity="sha256-j+BiRj+ITvpaXIeOLdAoI42z9ai7hq1dNqTr1nZ4V2I=" crossorigin="anonymous" />

<div class="reveal">
  <div class="slides">
    <section>
      <h2>Section Header</h2>
      <section>
        <img class="stretch" src="https://place-hold.it/500x1200">
      </section>
    </section>
  </div>
</div>

当前结果对您来说应该是这样的:

slide preview, img over header

或者我想它应该看起来像这样:我希望该部分标题可见。考虑到标题后,图片应仅拉伸以填充的空间。

请注意,我已经找到了this issue on GitHub,实际上我找到了部分解决方案(在class="stretch"标签上使用img)。

如何确定图像不与顶层标题重叠?我应该以其他方式使用reveal.js吗?我遇到错误了吗?

0 个答案:

没有答案