Needs h-0 class on the wrapping div regardless?
exalted opened this issue · 3 comments
Watching https://www.youtube.com/watch?v=NX_NW6bt6_s it seemed we could remove also h-0
from the parent element, however, if I do that, then the aspect ratio is not always respected.
In short, I have a grid of 3 columns, where the 2nd column spans to 2:
<div class="grid grid-cols-3">
<div class="aspect-w-1 aspect-h-1">
<img
class="object-cover rounded-lg shadow-lg"
src="/assets/img/freud.jpeg"
alt=""
/>
</div>
<p class="col-span-2 font-light">
<span class="italic font-serif"
>Some text</p>
</div>
So, ideally, I'd expect the image to appear as a square no matter what the viewport size is, however, check out this screen recording as the screen size gets narrower and narrower:
As you can see, Freud's photo, at some point isn't square anymore!
If I add h-0
to the parent div
however, so that the code above becomes:
<div class="grid grid-cols-3">
<div class="h-0 aspect-w-1 aspect-h-1">
<img
class="object-cover rounded-lg shadow-lg"
src="/assets/img/freud.jpeg"
alt=""
/>
</div>
<p class="col-span-2 font-light">
<span class="italic font-serif"
>Some text</p>
</div>
Then it works as advertised:
So, I wonder, is this a bug or am I missing something?
Thanks!
I had the same issue in a grid (and flex while testing) with a table element but just in Safari. (https://play.tailwindcss.com/Z4HgPoie2d)
h-0
just seems to force the browser to calculate the height of an object inside when the browser just isn't smart enough to do so
Hey! This is just a flexbox quirk as mentioned, have to deal with the same stuff when writing vanilla CSS
@adamwathan no strong opinions here however, I would like to argue that, although not a tailwind bug per se, IMO tailwind should opt into maintaining the aspect ratio by default (i.e. added h-0
behavior).
After all, that's how this plugin is "advertised" in https://www.youtube.com/watch?v=NX_NW6bt6_s: it does remove h-0
from the parent element and replaces it with aspect-*
.