Percentage size with fixed aspect ratio

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
tarsz
Posts: 14
Joined: Tue Oct 15, 2019 8:28 pm

Mon Aug 15, 2022 4:49 pm

Hi!
Sorry if this is already answered, I tried searching, but didn't find anything.
I want to set a menu (Container) to follow the size of the window, without the ratio changing. I tried doing logic blocks, like having 5 different resolutions depending on window size, but that's a pretty awful solution. Is there a better one?
Thanks in advance!
tarsz
Posts: 14
Joined: Tue Oct 15, 2019 8:28 pm

Mon Aug 15, 2022 4:54 pm

Also is there a way to do the same with font size? So it will fit within the rectangle at all times?
User avatar
Tony
Posts: 1193
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Wed Aug 17, 2022 1:23 pm

Hi,

This is the best that I could do:

https://rebrand.ly/P2VR7TXTRTSC

The text box uses CSS to set the text box at a specific percentage of the height of the viewport and css to maintain a ratio of 1:1.

You can read more about how to set the responsive ratio in my tutorial "Maintaining the Aspect Ratio of an iFrame" as it applies to a text box. https://tonyredhead.com/pano2vr-little- ... tio-iframe

The text changes by applying a CSS Class to the text box using font-size: and a text size "x"vw; You can read more about it here https://css-tricks.com/viewport-sized-typography/

Have fun :-)

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
tarsz
Posts: 14
Joined: Tue Oct 15, 2019 8:28 pm

Wed Aug 17, 2022 3:47 pm

Thanks! That's actually exactly what I've been looking for!
Post Reply