tailwindlabs/tailwindcss-aspect-ratio

Flexbox issue

zonay opened this issue · 4 comments

zonay commented

Does it work inside of flexbox? I couldn't be successful with this code:

<div className='flex h-screen bg-purple-900 items-center flex-col justify-center w-screen'> <div className='aspect-w-16 aspect-h-9'> <img src='https://picsum.photos/id/237/500/500' className='object-cover object-center' alt='' /> </div> </div>

adgower commented

I had same problem
works by setting width of a parent
<div class="flex justify-end"> <div class="w-1/2"> <div class="aspect-w-16 aspect-h-9"> <img src="./media/LM_Hero.jpg" class="object-cover object-center" alt="Person typing on a laptop keyboard"> </div> </div> </div>

  • 👍5
RSurya99 commented

i had the same problem too, but mine fixed by adding 2 width in parent
first i try @adgower solution but ended up having a very small image (the aspect ratio is already correct)

so I have come to a conclusion that flex doesn't have a fixed width, so you need to define the width on parent tag before using aspect-w aspect-h class

<div class="flex flex-col justify-center items-center mt-10 w-full">
	<div class="w-full">
                <div class="aspect-w-16 aspect-h-9">
                    <img src="img/services/img/conference-room.jpg" class="w-full h-full object-center object-cover" alt="">
                </div>
         </div>
	<a href="#">Read More</a>
</div>
  • 👍2
adamwathan commented

Yeah things like this often behave weirdly as direct children of flex containers, just a CSS thing. Glad you figured out a solution!

ScreamZ commented

https://stackoverflow.com/questions/44009015/use-flexbox-and-maintain-a-11-aspect-ratio-even-though-content-is-sized-differe

To maintain the aspect ratio of responsive elements, you can use the padding technique.
Note that you shouldn't use percentages on padding bottom/top for flex children, see here for more info.

For more details you can see this post