Image distortion with browser window |
Image distortion with browser window |
Lounewbie |
Oct 29 2017, 04:23 PM
Post
#1
|
Group: Members Posts: 2 Joined: 29-October 17 Member No.: 26,518 |
Hello.
I'm totally new to html and really have no clue what I am doing! I have a 360 image I've published: http://cirquecreative.co.uk/cirquecreative.co.uk/Upload/ How would I get the 360 image to keep it proportionally correct but also resize to any browser width and height, with no image distortion? I've attached a screen shot of the html code. Any help would be so gratefully received! |
Lounewbie |
Oct 29 2017, 04:25 PM
Post
#2
|
Group: Members Posts: 2 Joined: 29-October 17 Member No.: 26,518 |
File would upload, so code pasted below:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="mobile-web-app-capable" content="yes" /> <style type="text/css" title="Default"> body, div, h1, h2, h3, span, p { font-family: Verdana,Arial,Helvetica,sans-serif; } /* fullscreen */ html { height:100%; } body { height:100%; margin: 0px; overflow:hidden; /* disable scrollbars */ font-size: 10pt; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove highlight on tab for iOS/Android */ } /* fix for scroll bars on webkit & >=Mac OS X Lion */ ::-webkit-scrollbar { background-color: rgba(0,0,0,0.5); width: 0.75em; } ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.5); } </style> </head> <body> <!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - --> <script type="text/javascript" src="pano2vr_player.js"> </script> <div id="container" style="width:100%;height:100%;overflow:hidden;"> <br>Loading...<br><br> This content requires HTML5 with CSS3 3D Transforms or WebGL. </div> <script type="text/javascript"> // create the panorama player with the container pano=new pano2vrPlayer("container"); window.addEventListener("load", function() { pano.readConfigUrlAsync("pano.xml"); }); </script> <noscript> <p><b>Please enable Javascript!</b></p> </noscript> <!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - --> <!-- Hack needed to hide the url bar on iOS 9, iPhone 5s --> <div style="width:1px;height:1px;"></div> </body> </html> |
Lo-Fi Version | Time is now: 24th April 2024 - 05:44 AM |