/    Sign up×
Community /Pin to ProfileBookmark

Image Resize With Locked Aspect Ratio?

Copy linkTweet thisAlerts:
Apr 21.2003

Aloha,

I was playing around with one of the BG effect scripts in the library called Full Size Image, which autodetects the browser window size and resizes an image to fill the window.

[url]http://javascript.internet.com/bgeffects/full-size-image.html[/url]

It works great, but I was wondering if it could be modified to resize the image with a locked aspect ratio (same ratio of height X width) but still maximize the size of the image in the window? I don’t know enough abot Java to mess with the code successfully to get this result.

-Mike

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Mr_JApr 21.2003 — If you are going to maximise to the window sizes you cannot keep the original ratios without having white space added onto the smallest dimension.

The ratio for a 800 x 600 window is 1.33 : 1 so if your image was say height 100 x width 200 expanding until the width fitted the screen width would give you an image size of height 400 x width 800 so you would have 100 above and below the image of white space.

I think

?
Copy linkTweet thisAlerts:
@mouser28authorApr 21.2003 — Thank you for your response...

Yes, I expected white space, that's not a problem. I actually tweaked the code by just removing the width tag in the Javascript and it actually worked. It's pretty slick, at least if you use a high-res image.

So, problem solved! ?

-Mike
×

Success!

Help @mouser28 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 5.19,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...