Search code examples
csstailwind-cssviewportdaisyui

How to have a figure to always be visible in the viewport?

Using Tailwid and daisyUI component library, I'm designing a page with two section. The left section contains text and button. The right section is a figure with caption. I want the whole <figure> to always be visible in the viewport, and the figure keeps its ratio. Here is my code:

<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>

Tailwind Playground

When the viewport's height is high enough, it works well:

enter image description here

But when the viewport's height is low enough, it works weird:

enter image description here

I try various Max-Height classes but none of them works. Do you have any idea?

Solution

  • You could consider setting the max-height of the <figure> to 100vh. This would reflect the same height of the root <div>. Then, use a vertical flex layout to shrink the <img> height as necessary:

    <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>