/    Sign up×
Community /Pin to ProfileBookmark

resizing images and keep them in proportion

Copy linkTweet thisAlerts:
Jun 28.2006

Hi,

im working on a site which has a URL to an image which will be displayed at several points througout the site, the problem is that in the different ares of the site the designers wish to use different image sizes. obviously this causes the image to be distorted.

my question is.. is there some javascript function/technique that can be used to take an image and logically display it without distortion?

ie. grab the image and trim and splice to make the picture a certain size, triming rather than distorting.

thanks in advance for any advice

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceJun 28.2006 — JavaScript cannot really make any actual changes to an image's content. You can logically "crop" the image by placing it in a smaller DIV with overflow hidden, but that is about it. Otherwise, just monkeying with the dimensions is all JavaScript can do. To that end, though, calculations can certainly be used to prevent distortion due to mis-proportioning the dimensions:

oldWidth / oldHeight = ratio

newWidth * ratio = newHeight
Copy linkTweet thisAlerts:
@minestroneauthorJun 28.2006 — thanks for the reply. ive basically got a url

echo "<div align='left'><img alt='' height='160' src='".$row["news_thumbnail"]."' width='150' /></div> " ;

and the image aint 160*150

if you could possibly describe the DIV over flow hidden techinque i would be forever gratefull.

thanks,

david.

david
Copy linkTweet thisAlerts:
@phpnoviceJun 28.2006 — Search this forum using the following keywords:

image overflow hidden
Copy linkTweet thisAlerts:
@minestroneauthorJun 28.2006 — Search this forum using the following keywords:

image overflow hidden[/QUOTE]


i shall do so, thanks.
Copy linkTweet thisAlerts:
@phpnoviceJun 28.2006 — You're welcome.

Cheers.
×

Success!

Help @minestrone 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.17,
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,
)...