Locking in Aspect Ratio
- Hopki
- Gnome
- Posts: 13028
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
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,
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/
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/
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
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
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More about Viewport
https://developer.mozilla.org/en-US/doc ... t_meta_tag
- Multimediafabrik
- Posts: 63
- Joined: Thu Jun 21, 2018 11:28 pm
<div id="container"></div>-> pano container
with css:
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:
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:
with css:
Code: Select all
#container{
aspect-ratio: 1/1;
}
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>
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.
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.
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
Bump
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""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">"