Log in

View Full Version : Scale image size to the browser window


4dimad
05-27-2010, 09:11 PM
Hello,
I am a photographer, and have a little knowledge of javascript/html, so I hope you can help me out. My goal is to create a splash page for the flash website with one image centered on the page. Also I would like to display photograph so that it fills / scale as much as possible of the browser's window, and retains its ratio. it must be a cross-browser solution. It cannot be a background image since I am going to put some text under the image.
Thank you!
azoomer
05-27-2010, 10:12 PM
Hi 4dimad,
I set up an example page here (http://azoomer.com/Splash/).
Not sure exactly what you need, but take a look and tell me what changes you would like.
4dimad
05-27-2010, 10:58 PM
Dear azoomer,
Here is my page: http://www.adreampicture.com/Splash/index.htm
The code I use doesn't scale image in Firefox - it opens up original size, which is 1024x768 (not sure about other browsers):

<script type="text/javascript">
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var height_ratio = image_height / window_height
var width_ratio = image_width / window_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = "auto"
document.images[0].style.height = "90%"
}
else
{
document.images[0].style.width = "90%"
document.images[0].style.height = "auto"
}
}
</SCRIPT>

<body onResize="resizeImage()" bgcolor="#343430"><center>
<img src="SplashPage_new.jpg" border="0" margin="0"></center>

</body>
azoomer
05-27-2010, 11:09 PM
Yes i see it behaves a little strange. Do you need the picture to be 90% width at all times ?
Is there a particular reason you are using javascript and not regular css ?
azoomer
05-27-2010, 11:21 PM
OK take a look a this page to see if it works the way you need:
http://azoomer.com/Splash/
azoomer
05-28-2010, 12:08 AM
Looking at your code again it seems like you want all of the picture to be in view at all times, never exceeding neither 90% width nor 90% height. It looks like your javascript is only going into action on the actual resize event and not when the page is loading. I tried to add

<body onResize="resizeImage()" bgcolor="#343430" onload="resizeImage()" >

to your code and that seems to work. With this it resizes immediately when the page is loading ( in my browser anyway). I don't have a clue whether this is right or wrong, so corrections are most welcome. Just guessing you know !
4dimad
05-28-2010, 02:38 PM
 
Thank you!!! I have another question – hope you can help. I am trying to map “Enter site” button, but every time image gets resize the clickable area moves. I really appreciate your help!
azoomer
05-28-2010, 02:52 PM
The easy thing would be to make the whole image a link so peolple would enter the site no matter where they click on the picture.
huafeihua116
06-09-2010, 01:38 AM
Hi 4dimad,
I set up an example page here (http://azoomer.com/Splash/).
Not sure exactly what you need, but take a look and tell me what changes you would like.
Thank you for sharing this!