Css Aspect-ratio

Community Usage questions
1

Hi,
is it possible to use aspect-ratio inside O_S_C ?
I'm struggling to keep a panel container squared depending on the size resolution

2

Hi,

If I understand your question correctly, I have a few suggestions.

You could try using CSS Media queries.

Or, use JS script to watch for the screen orientation which you can grab using the globals.screen variable which will return {width, height, orientation}.

Otherwise, if the responsive size is not needed for the panel, just set the width/height property to a specific px size instead of percentage.

Cheers,
DMDComposer

3

Hey,

I was looking for some css function like :

width: 100vh;
height: 100%;

But the results is not perfect, and I can't understand why ?!

Will check for your solution.
And for a quick solution will use px, but it can't be a final solution.

1 Like
4

in fact I thought using

aspect-ratio : 1 / 1

would work but that's not the case

5 
aspect-ratio: 16 / 9;
height: auto!important;

seems to work. It won't on old iOS devices though (aspect-ratio - CSS: Cascading Style Sheets | MDN)

1 Like
6 
aspect-ratio: 16 / 9;
height: auto!important;

ok the second line is ... important
Had to add some grid-templates tricks to get something "stable" with other widget.
Thanks for the suggestion. Hope that help someone else