Auto picture resize

neil9999 · #1 09-06-2003, 01: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** · #2 09-06-2003, 02:24 PM

Sure:

<img src="123.png" alt="123" style="width:100%;" />

**Fang** · #3 09-06-2003, 02:27 PM

Do you mean like this:
<img alt="" src="images/an_image.gif" height="100%" width="100%" />

PeOfEo · #4 09-06-2003, 08: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 · #5 09-07-2003, 02: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 · #6 09-07-2003, 08: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 · #7 09-07-2003, 08: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 · #8 09-07-2003, 12:34 PM

well like I mentioned before just say width="100%" will do the other size automatically and be proportionate to the original size.

neil9999 · #9 09-07-2003, 02: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 · #10 09-07-2003, 07: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 · #11 09-07-2003, 09: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 · #12 09-08-2003, 01:40 PM

Mr J, I adapted your code to get this:

Code:

<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 · #13 09-08-2003, 06: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 · #14 09-09-2003, 12:10 AM

Quote:

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 · #15 09-09-2003, 04:27 AM

neil9999

Have a play with the file in the zip.

Now NS7 and Mozilla

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)