RFC: Aspect Ratio about spartan HOT 6 CLOSED

Looks great! Would the new-ish css aspect ratio property work, since it seems to have pretty wide support.
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Another option here is using a directive on the container, as it again alows the user to use any semantic html element they want

<div brnAspectRatio="3/4">
   <img ... />
</div>

from spartan.

Since tailwind also supports aspect-ratio out of the box I say we stick with the positioning implementation. https://tailwindcss.com/docs/aspect-ratio

I do think the docs should state that there's a CSS property for that and it should be considered first.

from spartan.

Great! Then numbers work and we just check if its 0 or less

from spartan.

That's a good point! I'd almost say that would be something to mention in future docs. Prefer CSS and fallback to this component.

While I like the directive approach but we'd have to figure out how to wrap the children in the components we need. Content projection seems easier here. Since there will always be DOM nodes to needed to make it work I'd actually say component.

Would be cool to support a ratio in text form instead of a number. Maybe we can support the most common ones as text?

from spartan.

Probably easier if its all text tbh as otherwise we need to parse out 16/9 out of 5.3333 since ng will just divide the numbers. We could use template literals to restrict it tho what we want. Otherwise were sort of forced into the position relative + absolute way of solving it.

type Ratio = `${number}/${number}`

Tho I also am up for aliasing a few common ones with declarative strings such as widescreen/phone etc.

I see what you mean with components, it sort of depends on impl here id say since all we need to do is add a single css property to the parent here. If we however wanted to do the relative/absolute approach a component would be easier.

from spartan.

It actually does not need to be the two values but can use the number directly.

Writing height / width is just how we naturally think about it.

But with the type you suggested parsing probably wouldn't be too bad either.

I guess we just have to make sure we're not dividing by 0 or the aspect ratio is 0 and we should be good.

Now I am leaning to supporting both 😂

from spartan.