I have a div that I need to maintain an aspect ratio of 2:3.
This tailwind css works for small screens
<div className="aspect-w-2 aspect-h-3">
...
</div>
But when the screen width is increased (very wide monitors) the div extends past the bottom of the screen. The div's width and height should stop growing once the div reaches max height.
Adding a max height doesn't work as it still lets the width increase (the aspect ratio is not maintained) eg
<div className="aspect-w-2 aspect-h-3 max-h-full">
...
</div>
How can I stop the div from growing but also maintain the aspect ratio?
Something like this:
