resizing images to different resolutions

liunx · Jan 9, 2008

I am using visual studio.net to develop a website. how do i make it so that when the page is viewed in different resolutions that it looks exactly the same. 
i am developing on a 17" monitor and when i opened up the application it was way out. I am using frames and have expressed the sizes in percentages.there are numerous ways to do it but you didn't specify if you wanted to use a server side language or client side. 
 
However the way that will work in files with a .HTML extension is. 
 
<script language="Javascript"> 
function redirect(){ 
if screen.width == 800 { 
window.location.replace("index800.html") 
} 
else if screen.width == 1024 { 
window.location.replace("index1024.html") 
} 
else { 
window.location.replace("other.html") 
} 
} 
</script> 
<body onload="redirect"> 
 
that will be your home page which should stay blank, then it will redirect you depending on the screen resolution, long winded I know but it will do the trick. 
 
EDIT: 
 
<script language="Javascript"> 
function resize(){ 
if screen.width == 800 { 
document.image1.width=64 
document.image1.height=64 
document.image2.width=128} 
else if screen.width == 1024 { 
document.image1.width=80 
document.image1.height=80 
document.image2.width=170} 
} 
else { 
document.image1.width=10 
document.image1.height=10 
document.image2.width=18} 
} 
} 
</script> 
<body onload="resize()"> 
<img src=http://www.webdeveloper.com/forum/archive/index.php/"SOURCE" name="image1"> 
 
that'll work too I think. 
 
Gaz.thanks mate, that has helped me heaps, thanks for the one importing tif files into paint shop that worked as well. your a legendOriginally posted by CrazyGaz 
...that will be your home page which should stay blank...13% of users do not use JavaScript. That first page needs to be a default page that works onany screen resolution.I had errors in my edit. 
<script language="Javascript"> 
function resize(){ 
if (screen.width == 800) { 
document.image1.width=64 
document.image1.height=64 
} 
else if (screen.width == 1024) { 
document.image1.width=80 
document.image1.height=80 
} 
else { 
document.image1.width=80 
document.image1.height=80 
} 
} 
</script> 
<body onload="resize()"> 
<img src=http://www.webdeveloper.com/forum/archive/index.php/"file:///C:/my%20documents/pic1.png" name="image1" width="320" height="240"> 
 
Gaz.i am only just trying out this code now, because i have so many images i am curious as to whether there is an easier way or not? i dont really want to have to go through every image and work out what it should be calculated to when it changes resolution. also that only changes the image size, what about the text, it will overlap the images. 
is server side scripting the best option?

resizing images to different resolutions

liunx

Guest