/    Sign up×
Community /Pin to ProfileBookmark

Image Resize

Copy linkTweet thisAlerts:
Sep 05.2003

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

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@InfatuasauthorSep 05.2003 — how do u resize an image depending on the useres resolution
Copy linkTweet thisAlerts:
@karayanSep 05.2003 — 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.
Copy linkTweet thisAlerts:
@InfatuasauthorSep 05.2003 — could you show me the code, i have never used javascript and i don't know what to do sorry
Copy linkTweet thisAlerts:
@InfatuasauthorSep 05.2003 — can u show me the code, this is my first time using javascript
Copy linkTweet thisAlerts:
@JupacSep 05.2003 — wat code?
Copy linkTweet thisAlerts:
@karayanSep 05.2003 — 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.
Copy linkTweet thisAlerts:
@karayanSep 05.2003 — Also, you may want to delete the other two postings you have related to this problem, and focus the discussion on this thread.
Copy linkTweet thisAlerts:
@FangSep 05.2003 — you can define the image size in %

<img alt="banner" src="Images/banner.gif" height="153" width="100%" />
Copy linkTweet thisAlerts:
@InfatuasauthorSep 05.2003 — 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" ???
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...