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>
When the viewport's height is high enough, it works well:
But when the viewport's height is low enough, it works weird:
I try various Max-Height classes but none of them works. Do you have any idea?
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>