如何让图形始终在视口中可见？

Question

使用Tailwid和daisyUI组件库，我正在设计一个包含两个部分的页面。左侧部分包含文本和按钮。右侧部分是带有标题的图。我希望整个

<figure>

在视口中始终可见，并且图形保持其比例。这是我的代码：

<div class="flex flex-col md:flex-row bg-green-300 items-center max-w-none space-x-10 px-10 h-screen">
  <section class="align-middle justify-center">
    <article class="prose py-10">
      <h1>404 – Không tìm thấy trang</h1>
      <p>
        Liên kết rút gọn với đuôi <code>{đuôiRútGọn}</code>{" "}
        chưa từng được tạo hoặc đã bị xoá trên hệ thống. Liên hệ người gửi liên kết cho bạn để được hỗ trợ.
      </p>
    </article>
    <button class="btn">
      <a href="/">Tạo liên kết khác</a>
    </button>
  </section>
  <section class="align-middle">
    <figure class="max-h-fit">
      <img src="https://placehold.co/2048x1488" alt="Tranh vẽ hai nguời đang trò chuyện với nhau ở quán nước vỉa hè" />
      <figcaption>
        Tranh: <a class="prose" href="https://doi-thoai.deno.dev/TheLinhRab.doi-thoai.1">Linh Rab</a>
      </figcaption>
    </figure>
  </section>
</div>

顺风游乐场

当视口的高度足够高时，效果很好：

但是当视口的高度足够低时，它的工作方式会很奇怪：

我尝试了各种 Max-Height 类，但没有一个有效。你有什么想法吗？

Answer 1

您可以考虑将

max-height

的

<figure>

设置为

100vh

。这将反映根

height

的相同

<div>

。然后，使用垂直弹性布局根据需要缩小

<img>

高度：

<script src="https://cdn.tailwindcss.com/3.4.4?plugins=typography"></script>

<div class="flex flex-col md:flex-row bg-green-300 items-center max-w-none space-x-10 px-10 h-screen">
  <section class="align-middle justify-center">
    <article class="prose py-10">
      <h1>404 – Không tìm thấy trang</h1>
      <p>
        Liên kết rút gọn với đuôi <code>{đuôiRútGọn}</code>{" "}
        chưa từng được tạo hoặc đã bị xoá trên hệ thống. Liên hệ người gửi liên kết cho bạn để được hỗ trợ.
      </p>
    </article>
    <button class="btn">
      <a href="/">Tạo liên kết khác</a>
    </button>
  </section>
  <section class="align-middle">
    <figure class="max-h-screen flex flex-col items-start">
      <img src="https://placehold.co/2048x1488" alt="Tranh vẽ hai nguời đang trò chuyện với nhau ở quán nước vỉa hè" class="flex-1 min-h-0"/>
      <figcaption>
        Tranh: <a class="prose" href="https://doi-thoai.deno.dev/TheLinhRab.doi-thoai.1">Linh Rab</a>
      </figcaption>
    </figure>
  </section>
</div>