Aspect ratio sizing

I am trying to create my own entry for aspect ratio, tried a few ways but the output is always odd, might be missing some code

aspect-[12/ sm:aspect-[8/ md:aspect-[12/10] sm:14] md:8] lg:10]

I see on the video element you implemented the aspect ratio, works ok with auto wide and tall, but found an issue with custom, see video, I might be doing something wrong

when I look at inspect element I see aspect-[4/5] sm:aspect-[4/5] md:aspect-[custom]

https://we.tl/t-9RNWwVg64i

video of what I tried, not the only way I tried

https://we.tl/t-js9VmQAamK

I tried with a text input eg 16/9 as well

this looks like “expected behaviour”, even though I can understand it might be confusing :sweat_smile:

At the moment you are using the raw values from the controls directly in your template (aspect-[{{car1}}/{{car}}]) which will work as you want it to… until you override the setting on a breakpoint. At that point, Elements will return a string of responsively prefixed values (this is why you’re getting sm: / lg: prefixed values).

The fix is actually tricker than one might imagine - you’d need to use the hooks file to massage the values from the two controls in to correctly formatted values for each breakpoint.

If that doesn’t sound too scary then I might be able whip up an example for you later today/tomorrow - let me know! :slight_smile:

@Bon please if you could provide an example, that would be great, give me an idea what else is possible.

On the same subject you video component allows for custom aspects but these do not seem to work for each breakpoint. If you use auto wide and tall they do. Is this a similar issue

your image component only works across different breakpoints with auto wide and tall, custom has the same setting across breakpoints