Auto picture resize

liunx · Jan 9, 2008

Hi, 
 
Using HTML, is it possible to automaticly resize a picture to fit on a page? 
 
The script needs to be compatiable with frames. It must be HTML so all browsers can see the picture. 
 
Thanks, 
 
NeilSure: 
 
<img src=http://www.webdeveloper.com/forum/archive/index.php/"123.png" alt="123" style="width:100%;" />Do you mean like this: 
<img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/an_image.gif" height="100%" width="100%" />If you specify just the width the height will automatically change to match the width proportionate to the original. Same thing if you specify just the height. So when it resizes its not out of proportion and all weird looking. If you specify both the width and the height as 100% the image will stretch completly and it will throw it out of proportion. Also I would not use alt="" you should really put something in there like the image name or something, because that alt tag is used by audiobraille browsers to catologe the iamges. Also if a url is wrong it is nice to have some text in the images place.Hi 
 
The picture needs to keep its origional ratios (which are 10:4, so if the width was 200 the height would be 80) and make itself as big as possible, but it must all fit on the screen at once. If you then resize the frame it's in it should resize as above. 
 
Eg. 
 
If the height of the frame was 200 and the width 400, the picture would be 400(width)X160(height). 
 
If you then resized the frame to 500X60, the picture would automaticly resize to 150X60. 
 
I've tried using this code: 
 
<img alt="piccy" src=http://www.webdeveloper.com/forum/archive/index.php/"mypic.jpg" style="width:100%" height='40%'> 
 
But the height is always 40% of the frame height and the width 100% of the frame width with this code. 
 
Thanks for your help, 
 
NeilSpecify one or the other thought not bots, because the frame width can change depending on screen size and resolution etc and they you dont have a perfect square anymore and the picture is no longer in proportion.My frames aren't resizable, and I don't want them to resize. They only change size if you change the size of the browser window, which is why I wan't the script. 
 
Thanks, 
 
Neilwell like I mentioned before just say width="100%" will do the other size automatically and be proportionate to the original size.<img alt="piccy" src=http://www.webdeveloper.com/forum/archive/index.php/"picture.jpg" width="100%"> nearly does what I want, but if the height of the frame is less then 40 of the width then you need to scroll down to see the whole picture. You shouldn't need to scroll, whatever the width or height. 
 
Thanks, 
 
NeilLets see if we're on the right track here. 
Please try the following 
 
 
 
<HTML> 
<HEAD> 
<TITLE>Document Title</TITLE> 
<script> 
 
function init(){ 
width=document.body.clientWidth 
height=document.body.clientHeight 
 
my_image=new Image() 
my_image.src=http://www.webdeveloper.com/forum/archive/index.php/"seapic1.jpg" 
 
percent_width=my_image.width/width 
percent_height=my_image.height/height 
init2() 
} 
 
function init2(){ 
width2=document.body.clientWidth 
height2=document.body.clientHeight 
 
document.getElementById("mypic").width=width2*percent_width 
document.getElementById("mypic").height=height2*percent_height 
 
} 
onresize=init2 
</script> 
</HEAD> 
<BODY onload="init()"> 
<img id="mypic" src=http://www.webdeveloper.com/forum/archive/index.php/"seapic1.jpg"> 
 
 
</BODY> 
</HTML>could you post a link too it would be helpful. Also if the width="100%" causes you to have to scroll use this insted height="100%" the width wont be the complete width of the page but the image iwll be proportionate to the original and you wont have to scroll.Mr J, I adapted your code to get this: 
 
 
<HTML> 
<HEAD> 
<TITLE>Document Title</TITLE> 
<script> 
 
function init(){ 
width=document.body.clientWidth 
height=document.body.clientHeight 
 
if('width/height=>2.499'){document.getElementById("mypic").width=height*2.25; document.getElementById("mypic").height=height*0.9;}; 
 
if('width/height=<2.5'){document.getElementById("mypic").width=width*0.9; document.getElementById("mypic").height=width*0.36;}; 
 
} 
</script> 
</HEAD> 
<BODY onload="init()" onresize="init()"> 
<img id="mypic" src=http://www.webdeveloper.com/forum/archive/index.php/"elvisdayout.jpg" width='400' height='160'> 
 
 
</BODY> 
</HTML> 
 
 
 
Please put this code in a webpage to see it. The only problem is if the height of the frame (which I think document.body.clientWidth measures) is less then 40% of the width you need to scroll down. Please could you adapt my script to solve this? 
 
 
PeOfEo, the size of the frame can vary, so only using height='100%' wouldn't work. 
 
 
Thanks, 
 
NeilPlease try the following 
 
 
<HTML> 
<HEAD> 
<TITLE>Document Title</TITLE> 
<script> 
 
function init(){ 
my_div=document.getElementById("mypic") 
width=document.body.clientWidth 
height=document.body.clientHeight 
 
my_image=new Image() 
my_image.src=http://www.webdeveloper.com/forum/archive/index.php/"seapic1.jpg" 
//my_image.width=400 
//my_image.height=160 
 
percw=my_image.width/my_image.height //2.5 
perch=my_image.height/my_image.width //0.4 
percent_width=my_image.width/width 
percent_height=my_image.height/height 
 
init2() 
} 
 
function init2(){ 
width2=document.body.clientWidth 
height2=document.body.clientHeight 
 
my_div.width=width2*percent_width 
my_div.height=(width2*percent_width )*perch 
 
if(height2<my_div.height){ 
init3() 
} 
} 
 
 
function init3(){ 
my_div.height=height2-20 
my_div.width=my_div.height*percw 
} 
onresize=init2 
</script> 
</HEAD> 
<BODY onload="init()"> 
<img id="mypic" src=http://www.webdeveloper.com/forum/archive/index.php/"elvisdayout.jpg"> 
 
 
</BODY> 
</HTML>Originally posted by neil9999 
 
 
PeOfEo, the size of the frame can vary, so only using height='100%' wouldn't work. 
The whole point of only useing one is so that the image will be in proportion. The frame will not be a perfect square so useing two will throw the image out of proportion, this is especially true if the frame's size is not constant. It is better that the image be a little smaller then out of proportion correct?neil9999 
 
Have a play with the file in the zip. 
 
Now NS7 and Mozilla

Auto picture resize

liunx

Guest