Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Auto Image resizing

Posted on 2003-02-20
Medium Priority
Last Modified: 2008-03-17
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.
Question by:jhochstuhl
  • 3
LVL 12

Accepted Solution

ahosang earned 800 total points
ID: 7990163
Yes write each out with the larger size(that would be ideal for 1024x768), and have an onload like:

<img src="img.gif" width="100" height="100" onload="if (screen.width<1020) {resize(this);}">

Then the resize function is defined in the <head> thusly:
function resize(im) {

Doesn't work in obsolete browsers.
LVL 12

Expert Comment

ID: 7990223
The method above does the resizing when the images load.
 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:


Then in each image place you have to conditionally write each one:
if (isSmall) {
  document.write("<img src='img.gif' width='78' height='78'>");
} else {
  document.write("<img src='img.gif' width='100' height='100'>")
Of course you could have the images pre-defined in an array to make your conditional writing simpler.

Author Comment

ID: 7996839

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:

<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(Duration=2,Transition=6)">

Add to Head:

function resize(im) {


<BODY TEXT="#000000" LINK="#0000ff" VLINK="#800080" BACKGROUND="Image10.jpg">


Instead of:

<IMG SRC="TestImage.jpg">


<img src="img.gif" width="100" height="100" onload="if (screen.width<1020) {resize(this);}">


Is this correct? I see where it does the reduction, but how does it know what screen it is working with?

LVL 12

Expert Comment

ID: 7998300
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?
LVL 16

Expert Comment

ID: 10082587
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:

 - [Points to ahosang Grade A]

Please leave any comments here within the next seven days.

EE Cleanup Volunteer

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question