Theo's Typesafe Cult•7mo ago

Sizing to fit parent container, while respecting css "aspect-ratio"

I've been struggling with this for 2 hours so hopefully someone can help me out. I have a div that I need a set aspect ratio, and am using the CSS "aspect-ratio" attribute for this. This div (white) needs to scale to fit the parent container (red), while maintaining aspect ratio. I need my container to be scaled, not just what is shown in the viewport (i.e. no overflow-hidden). I also need this to be pure CSS, as this is in a NextJS server component. current code:

<div className="flex bg-red-500 w-full items-center">
  <div className="aspect-square bg-white rounded-lg shadow-lg p-8 justify-between dark:text-black">
    {children}
  </div>
</div>

<div className="flex bg-red-500 w-full items-center">
  <div className="aspect-square bg-white rounded-lg shadow-lg p-8 justify-between dark:text-black">
    {children}
  </div>
</div>

Solution:

ok, solution (for minimal example) was aspect-square h-[min(100vh,100vw)] for my original problem (not shown here) i had to do: aspect-square h-[min(50vw-24px,100vh-210px)] (50vw since there are 2 side by side, and the arbitrary px values guessed/checked until it matched parent) ...

Jump to solution

3 Replies

KoalaOP•7mo ago

need it to look like: (and on parent container resize):

KoalaOP•7mo ago

Here's a minimal example stackblitz: https://stackblitz.com/edit/stackblitz-starters-zhkpve?file=index.html

Jack Schedel

StackBlitz

Aspect ratio fit - StackBlitz

HTML/CSS/JS Starter

Solution

Koala•7mo ago

Gaming

Programming

Sizing to fit parent container, while respecting css "aspect-ratio"