Click to See Complete Forum and Search --> : Image Resize
Infatuas
09-04-2003, 11:08 PM
Hello, I am making a website, and i want the banner to resize depending on the users screen size so that no scrolling would be necessary.. I tried to collapse but i doesn't resize the banner accordingly..
If user has 800 * 600
then pic should be 750 *153
If user has 1024 * 768
then pic should be 1024 *153
so on and so forth, please help
Infatuas
09-04-2003, 11:28 PM
how do u resize an image depending on the useres resolution
karayan
09-04-2003, 11:35 PM
The user's screen size can be determined by the following properties of the screen object:
screen.height and screen.width
The img tag has width and height properties. So, assuming that this is the first image of the document, you can use something like:
document.images[0].width
to set it to whatever you want.
You may want to develop a more intelligent way of figuring out the size for the image, as screen resolutions aren't limited to 800x600 and 1024x768. Also be aware of the fact that image resizing in browsers is done in the least painful way -- i.e., no resampling. That makes resizing work, but weakly, and so the image quality may be affected.
Infatuas
09-04-2003, 11:37 PM
could you show me the code, i have never used javascript and i don't know what to do sorry
Infatuas
09-04-2003, 11:48 PM
can u show me the code, this is my first time using javascript
Jupac
09-04-2003, 11:52 PM
wat code?
karayan
09-05-2003, 12:35 AM
Well, you could try something like this:
<script>
<!--- Hide
function fixImage() {
if (screen.width == 800) document.images[0].width=750;
else document.images[0].width=1024;
document.images[0].width=153;
}
// hide --->
</script>
You place this in your HTML file. Then, the bodu tag should look like this:
<body onLoad='fixImage()'>
This is far from perfect. What it will do is make the image small if the screen width is 800, large if it is anything else. The height is set to 153 for both cases. (I guess, the image will stretch depending on how wide the screen is.) Doesn't exactly cover all the cases, but might work for most viewers.
karayan
09-05-2003, 12:41 AM
Also, you may want to delete the other two postings you have related to this problem, and focus the discussion on this thread.
Khalid Ali
09-05-2003, 01:11 AM
this link should help you.
http://www.webapplikations.com/pages/html_js/image_examples/OpenImageSizedWindow2.html
you can define the image size in %
<img alt="banner" src="Images/banner.gif" height="153" width="100%" />
Infatuas
09-05-2003, 02:04 PM
in this code:
<script>
<!--- Hide
function fixImage() {
if (screen.width == 800) document.images[0].width=750;
else document.images[0].width=1024;
document.images[0].width=153;
}
// hide --->
</script>
where would i specify the image "logo.gif" ???