PDA

Click to See Complete Forum and Search --> : Auto picture resize

neil9999
09-06-2003, 12:15 PM
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,

Neil
David Harrison
09-06-2003, 01:24 PM
Sure:

<img src="123.png" alt="123" style="width:100%;" />
Fang
09-06-2003, 01:27 PM
Do you mean like this:
<img alt="" src="images/an_image.gif" height="100%" width="100%" />
PeOfEo
09-06-2003, 07:08 PM
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.
neil9999
09-07-2003, 01:40 AM
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="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,

Neil
PeOfEo
09-07-2003, 07:35 AM
Specify 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.
neil9999
09-07-2003, 07:48 AM
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,

Neil
PeOfEo
09-07-2003, 11:34 AM
well like I mentioned before just say width="100%" will do the other size automatically and be proportionate to the original size.
neil9999
09-07-2003, 01:50 PM
<img alt="piccy" src="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,

Neil
Mr J
09-07-2003, 06:01 PM
Lets 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="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="seapic1.jpg">


</BODY>
</HTML>
PeOfEo
09-07-2003, 08:26 PM
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.
neil9999
09-08-2003, 12:40 PM
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="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,

Neil
Mr J
09-08-2003, 05:37 PM
Please 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="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="elvisdayout.jpg">


</BODY>
</HTML>
PeOfEo
09-08-2003, 11:10 PM
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?
Mr J
09-09-2003, 03:27 AM
neil9999

Have a play with the file in the zip.

Now NS7 and Mozilla