Auto picture resize

@neil9999Sep 06.2003

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

to post a comment

HTML

14 Comments(s) _↴

@David_HarrisonSep 06.2003 — #Sure:

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

@FangSep 06.2003 — #Do you mean like this:

<img alt="" src="images/an_image.gif" height="100%" width="100%" />

@PeOfEoSep 07.2003 — #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.

@neil9999authorSep 07.2003 — #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

@PeOfEoSep 07.2003 — #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.

@neil9999authorSep 07.2003 — #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

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

@neil9999authorSep 07.2003 — #<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_JSep 07.2003 — #Lets see if we're on the right track here.

Please try the following

[SIZE=1]

<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>

[/SIZE]

@PeOfEoSep 08.2003 — #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.

@neil9999authorSep 08.2003 — #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> 
 
 [/CODE]

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_JSep 08.2003 — #Please try the following

[SIZE=1]

<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>

[/SIZE]

@PeOfEoSep 09.2003 — #[i]Originally posted by neil9999 [/i]

[B]

PeOfEo, the size of the frame can vary, so only using height='100%' wouldn't work.

[/B][/QUOTE] 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_JSep 09.2003 — #[B]neil9999[/B]

Have a play with the file in the zip.

Now NS7 and Mozilla

[upl-file uuid=98fcbfc7-fc98-49a9-9ea1-6f3beb6b6f52 size=771B]image_test2.zip[/upl-file]

Also in #HTML _↴

Unwanted Refresh Problems with links in Firefox robots.txt file

Success!

Help @neil9999 spread the word by sharing this article on Twitter...

Tweet This

Auto picture resize

14 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Auto picture resize

14 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #HTML _↴