Koala Posts - Answer Overflow

Koala

•Created by Koala on 5/20/2024 in #questions

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>

6 replies

Gaming

Programming