faqts : Computers : Programming : Languages : JavaScript : DHTML

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

19 of 41 people (46%) answered Yes
Recently 3 of 10 people (30%) answered Yes

Entry

How to dynamically resize an image according to browser dimensions

Feb 7th, 2001 13:43
Eddie Traversa, http://www.dhtmlnirvana.com/


One of the biggest problems facing developers today is to dynamically 
resize images according to browser dimensions. So here's a little 
something I came up with. First the complete script:
<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- 
function Is() {
agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) && ((agent.indexOf
('spoofer') == -1) && (agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3));
this.ns3 = (this.ns && (this.major == 3));
this.ns4b = (this.ns && (this.major == 4) && (this.minor <= 4.03));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") 
== -1));
this.ie5 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") !
= -1));
this.ie55 = (this.ie && (this.major == 4) && (agent.indexOf("msie 
5.5") != -1));
this.ie6 = (this.ie && (agent.indexOf("msie 6.0")!=-1) );
this.aol = (agent.indexOf("aol") != -1);
this.aol3 = (this.aol && this.ie3);
this.aol4 = (this.aol && this.ie4);
this.aol5 = (this.aol && this.ie5);
}
var is = new Is();
function winResize() {
if(is.ns4 ||is.ns6||is.ie4||is.ie5||is.ie55||is.ie6) {
history.go(0);
}
}
// -->
</script>
</HEAD>
<body onResize="winResize()">
<div id="backgroundLayer" style="position:absolute; width:200px; 
height:115px; z-index:1; left: 0px; top: 0; visibility: visible">
<SCRIPT LANGUAGE="JavaScript">
if(is.ns4 || is.ns6) {
available_width = innerWidth;
available_height = innerHeight;
}
else if(is.ie4 || is.ie5 || is.ie55 || is.ie6) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
}
if(is.ie4 || is.ie5 || is.ie55 || is.ie6 || is.ns6 || is.ns4) {
image1_width = (available_width * 1.00);
image1_height = (available_height * 1.00);
var image1 = '<img src="nirvana.jpg" width="' + image1_width + '" 
height="' + image1_height + '">';
document.write(image1);
}
</script>
</div>
</body>
</html>
We begin with my standard browser sniffer Is() and a little function 
winResize() to handle the resizing of images. The real magic however, 
is contained within the body section. 
The first thing to do is to create a CSS layer as demonstrated below: 
<div id="backgroundLayer" style="position:absolute; width:200px; 
height:115px; z-index:1; left: 0px; top: 0; visibility: visible">
Then we need to think about the logic of what's involved in getting an 
image to resize dynamically according to a browsers dimensions. 
According to this logic, one of the immediate things needed to be paid 
attention to is to capture a user's browser dimensions. In order to 
achieve this we create a script within the CSS layer and use: 
if(is.ns4 || is.ns6) {
available_width = innerWidth;
available_height = innerHeight;
}
else if(is.ie4 || is.ie5 || is.ie55 || is.ie6) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
}
We create two variables named available_width and available_height 
respectively. Here is where our earlier browser sniffer comes into 
play. We create a condition for the Netscape version browsers and then 
assign the variables available_width and available_height to be 
associated with innerWidth and innerHeight respectively. innerWidth and 
innerHeight are Netscape propietry methods. 
For Internet Explorer, the variables available_width and 
available_height are assigned to document.body.clientWidth; and 
document.body.clientHeight; respectively. document.body.clientWidth; 
and document.body.clientHeight; are Internet Explorer propietry 
methods. 
The next part of the script is used to first detect all the browsers 
capable of using this dynamic resizing method by using the following 
conditional statement:
if(is.ie4 || is.ie5 || is.ie55 || is.ie6 || is.ns6 || is.ns4) {
Then, two more variables image1_width and image1_height are created to 
handle the image resizing based on browser dimensions: 
image1_width = (available_width * 1.00);
image1_height = (available_height * 1.00);
Remember our earlier variables available_width and available_height? 
Here is where they come into play in this equation. The variable 
image1_width points to the variable available_width which contains the 
browser's width dimension information. By using a little math we can 
then make the image fit to a browser's width dimensions, hence the use 
of * 1.00 . All that is happening here is that we are telling the 
browser to scale the image proportionally to the browsers width. 
Proportionally 1.00 is equivocal to 100%. If we wanted to scale the 
image to half of the browser width for example then we would use 
image1_width = (available_width * 0.50); . The exact same method is 
used to make the image resize according to a browsers height. 
The next stage is write in the image itself. To accomplish this, 
another variable is created var image1. To make the image dynamically 
resize we use the earlier captured information about the browsers 
dimensions and the information pertaining to how large we want the 
image to scale to. Hence, we assign the attributes width and height 
with that information as demonstrated below:
var image1 = '<img src="nirvana.jpg" width="' + image1_width + '" 
height="' + image1_height + '">';
The final thing left to do is dynamically write in the image by using 
document.write and then just close of the script and div tag as shown 
here. 
document.write(image1);
}
</script>
</div> 
A couple of things worth noting:
1. Its best to use higher resolution images and scale down rather than 
using lower resolutions images and scaling up. 
2. To have content or other elements over the image, use css layers 
with a higher z-index. 
3. You are not limited to a single image, all images can be made to 
scale, as can flash movies etc... All that's needed here is to change 
image1 to image2 or whatever name makes most conceptual sense to you. 
4. To view complete working examples see http://www.dhtmlnirvana.com/ 
or the One Project site (IE5+ or NS6) once your there.