Locking in Aspect Ratio

Q&A about the latest versions
Post Reply
mmpano
Posts: 7
Joined: Wed Aug 03, 2022 12:35 pm

Thu Aug 11, 2022 4:04 pm

Is there a way to frame the viewport at a 1:1 (square) ratio? We received this request and I'm wondering if there is a way to do this in the skin editor and/or some output settings.
User avatar
Hopki
Gnome
Posts: 12363
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thu Aug 11, 2022 4:41 pm

Hi,
With my limited web developer knowledge, I would think this would be done on the web page displaying the tour.
So the web developer would set you a div to keep the aspect ratio of the viewport.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
360Texas
Moderator
Posts: 3643
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Thu Aug 11, 2022 7:09 pm

My web page has a " viewport " meta string that looks like this, that permits scaling the page content to fit the cellphone or desktop screen

<meta name="viewport" content="width=device-width, initial-scale=1.0">

More about Viewport

https://developer.mozilla.org/en-US/doc ... t_meta_tag
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
Multimediafabrik
Posts: 53
Joined: Thu Jun 21, 2018 11:28 pm

Fri Aug 12, 2022 9:15 am

<div id="container"></div>-> pano container

with css:

Code: Select all

#container{
aspect-ratio: 1/1;
}
this aspect-ratio takes the #container element's width and adjusts the height to create the given aspect-ratio

to make the biggest square possible for all screens:

Code: Select all


#container{
width: 100vh;
aspect-ratio: 1/1;
}

100vh stands for 100% of the viewport height. So it will always be a square with full page height.

in your HTML file you can do this like that:

Code: Select all

<html>
<head>
...
<style>
#container{
width: 100vh;
aspect-ratio: 1/1;
}
</style>
</head>
<body>
...
<div id="container"></div>
...
</body>
</html>
mmpano
Posts: 7
Joined: Wed Aug 03, 2022 12:35 pm

Fri Aug 12, 2022 5:31 pm

This is all very helpful, thanks! The #container{width: 100vh; aspect-ratio:1/1;} piece of code works well besides on portrait mode on a cell phone as it's taking the height of the phone screen so the container is wider than the screen. Is there a way to check for screen width and height and apply a different container if one is greater than the other?

I'm thinking of adding #container2{height: 100vw; aspect-ratio: 1/1;} as a second container for screens that are tall and using an if statement to check if screen height is greater than width. So far, not so good.
User avatar
360Texas
Moderator
Posts: 3643
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Fri Aug 12, 2022 10:47 pm

Bump
"My web page has a " viewport " meta string that looks like this, that permits scaling the page content to fit the cellphone or desktop screen

<meta name="viewport" content="width=device-width, initial-scale=1.0">"
It works on desktop big 27 inch dual monitors screen AND on my Samsung s9 cell phone Portrait and Landscape . It all fits ... because all our pages are designed to be "Responsive design"
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
Post Reply