The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Image distortion with browser window
Lounewbie
post 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! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lounewbie
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 09:53 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC