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

Question

我正在尝试使用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>

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

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

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

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