jhochstuhl
asked on
Auto Image resizing
I hope I am in the right forum for this as it seems that a javascript would be the solution..
I have an older web template that generate HTML pages that contain images. The old template was designed for 800x600 resolution. In this day and age that is too small.
I modeified the template to generate two seperate galleries based on screen resolution. It is currently a manual process where the use must select either 800x600 or 1024x768 resolution as they enter the site.
This solves the problem, but the draw back is obviously I must maintain two galleries of images, one for 800x600 display and the other for the 1024x768. Not only is this a pain in the butt, but it also eats Hard drive space.
What I would like to know, is if there is anyway to dynamically resize the image based on the user's screen resolution. What I have in mind is to only provide the highest image resolution hoping their exists a technique to resize the imagine down on lower resolution screens.
Another issue is that the images are all different sizes with different aspects. If they were all the same aspect, I could used the Width and Height contraints to regulate picture size.
So basically, is there a miacle that exists, to determine the browser window size and then maximize the image on the available space while retaining aspect ratios?
Geeez, don't want much do I? <Sheepish grin> Definitely an expert question.
I have an older web template that generate HTML pages that contain images. The old template was designed for 800x600 resolution. In this day and age that is too small.
I modeified the template to generate two seperate galleries based on screen resolution. It is currently a manual process where the use must select either 800x600 or 1024x768 resolution as they enter the site.
This solves the problem, but the draw back is obviously I must maintain two galleries of images, one for 800x600 display and the other for the 1024x768. Not only is this a pain in the butt, but it also eats Hard drive space.
What I would like to know, is if there is anyway to dynamically resize the image based on the user's screen resolution. What I have in mind is to only provide the highest image resolution hoping their exists a technique to resize the imagine down on lower resolution screens.
Another issue is that the images are all different sizes with different aspects. If they were all the same aspect, I could used the Width and Height contraints to regulate picture size.
So basically, is there a miacle that exists, to determine the browser window size and then maximize the image on the available space while retaining aspect ratios?
Geeez, don't want much do I? <Sheepish grin> Definitely an expert question.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
-Chuckle-
Listen ahosang, really appreciate the response, and it looks good to me, but I am a javascript beginner. Might have to get a little more basic here for me.
For one thing, how do we know what the size size is? And isn't avilable browser width/height a different matter then screen resolution.
Not-withstanding that, so I would write my page like:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="Version" CONTENT="8.0.4308">
<META NAME="Date" CONTENT="2/18/03">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Durat
Add to Head:
<script>
function resize(im) {
im.height*=0.78;
im.width*=0.78;
}
</script>
</HEAD>
<BODY TEXT="#000000" LINK="#0000ff" VLINK="#800080" BACKGROUND="Image10.jpg">
<P ALIGN="CENTER"><CENTER><TA
<TR>
<TD VALIGN="MIDDLE" HEIGHT=445>
<P ALIGN="CENTER">
Instead of:
<IMG SRC="TestImage.jpg">
Use:
<img src="img.gif" width="100" height="100" onload="if (screen.width<1020) {resize(this);}">
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Is this correct? I see where it does the reduction, but how does it know what screen it is working with?
Joe
Listen ahosang, really appreciate the response, and it looks good to me, but I am a javascript beginner. Might have to get a little more basic here for me.
For one thing, how do we know what the size size is? And isn't avilable browser width/height a different matter then screen resolution.
Not-withstanding that, so I would write my page like:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="Version" CONTENT="8.0.4308">
<META NAME="Date" CONTENT="2/18/03">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Durat
Add to Head:
<script>
function resize(im) {
im.height*=0.78;
im.width*=0.78;
}
</script>
</HEAD>
<BODY TEXT="#000000" LINK="#0000ff" VLINK="#800080" BACKGROUND="Image10.jpg">
<P ALIGN="CENTER"><CENTER><TA
<TR>
<TD VALIGN="MIDDLE" HEIGHT=445>
<P ALIGN="CENTER">
Instead of:
<IMG SRC="TestImage.jpg">
Use:
<img src="img.gif" width="100" height="100" onload="if (screen.width<1020) {resize(this);}">
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Is this correct? I see where it does the reduction, but how does it know what screen it is working with?
Joe
Forget browser space. It is screen resolution you're concerned with right? That's what you said.
This part:
if (screen.width<1024) {//do whatever
tests if the horizontal component of screen res. is lower than 1024
And this part in the second comment:
var isSmall=(screen.width<1020
makes a boolean value for isSmall which is true if the condition in the parentheses is true.
I just wondered - were you filling in width and height attributes for your images in the 1024x768 page? I assumed you were. These are the values to give them in my first solution. If you were NOT filling in any values, then how did you get the thing to work across the two screen sizes?
This part:
if (screen.width<1024) {//do whatever
tests if the horizontal component of screen res. is lower than 1024
And this part in the second comment:
var isSmall=(screen.width<1020
makes a boolean value for isSmall which is true if the condition in the parentheses is true.
I just wondered - were you filling in width and height attributes for your images in the 1024x768 page? I assumed you were. These are the values to give them in my first solution. If you were NOT filling in any values, then how did you get the thing to work across the two screen sizes?
**************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
**************************
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area:
RECOMMENDATION:
- [Points to ahosang Grade A]
Please leave any comments here within the next seven days.
**************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
**************************
jAy
EE Cleanup Volunteer
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
**************************
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area:
RECOMMENDATION:
- [Points to ahosang Grade A]
Please leave any comments here within the next seven days.
**************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
**************************
jAy
EE Cleanup Volunteer
To write out differing width, height attributes in the actual HTML(and make it work in obsolete browsers as well), it's a bit more:
<script>
isSmall=(screen.width<1020
</script>
Then in each image place you have to conditionally write each one:
<script>
if (isSmall) {
document.write("<img src='img.gif' width='78' height='78'>");
} else {
document.write("<img src='img.gif' width='100' height='100'>")
}
</script>
Of course you could have the images pre-defined in an array to make your conditional writing simpler.