Jump to content

Resize image to fit browser size *NoDogSplash*


winkillerx
 Share

Recommended Posts

I just want to resize the image to fit the user's browser. Also, scale the image when the user changes the size of their browser. I am not very good at HTML5/CSS, lol

Here is how my splash screen is displaying:

http://postimg.org/image/kvfo77knt/

Here is the splash.html file:

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="$imagesdir/wifi-signal.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Halifax WiFi - High Speed Hotspots Simplified!</title>
<script type="text/javascript" language="JavaScript">

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<!-- preload button2 -->
<body onLoad="MM_preloadImages('$imagesdir/button2.png')">
<!-- background image -->
<img src="$imagesdir/background.png" style="position: absolute; top: 0px; left: 0px" width="1024" height="768" />
<!-- On mouseover, swap button1 with button2 -->
<a href="$authtarget" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','$imagesdir/button2.png',1)">
<!-- button1 -->
<img src="$imagesdir/button1.png" style="position: absolute; top: 169px; left: 323px; z-index: 1; width: 360px height="365"" id="Image10" /></a>
</body>
</html>

<body onresize="resizeImage()">
<center>
<table height="100%" width="100%"><td valign="middle">
<center><img onload="resizeImage()" margin="0" border="0" src="image.gif"></center>
</td></table>
</center>
</body>
Edited by winkillerx
Link to comment
Share on other sites

<img src="$imagesdir/button1.png" style="position: absolute; top: 169px; left: 323px; z-index: 1; width: 360px height="365"" id="Image10" />

Your issue is here.

Your'e saying height="365""

It should be height:365px

Also you need a ; after width: 360px

Here is the corrected code.

<img src="$imagesdir/button1.png" style="position: absolute; top: 169px; left: 323px; z-index: 1; width: 360px; height: 365px;" id="Image10" />
Link to comment
Share on other sites

Again, using percentages will work for what you want to do. You could get more complex and change the behavior of the page if the screen size is below a specific value, but I think that's more than you really need.

Just move everything from pixel sizes to percentages and you should be able to display it nicely across most screens.

Best regards,

Sebkinne

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...