By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,930 Members | 1,404 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,930 IT Pros & Developers. It's quick & easy.

The proportionate to the size of the image scaling window

P: n/a
Hi.

I know the dimensions area visible on the screen and I would like to
picture that there put dynamically, match its size to the window, while
retaining the proportions of course.

For example:

Screen area visible: 1280x589
The picture size: 3008x2000

What use a mathematical formula to convert the size of the image, which
adjust it to a visible area on the screen?

--
Peter
Sep 3 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On Sep 3, 9:34*am, Peter May <peter....@poczta.fmwrote:
Hi.

I know the dimensions area visible on the screen and I would like to
picture that there put dynamically, match its size to the window, while
retaining the proportions of course.

For example:

Screen area visible: * *1280x589
The picture size: * * * 3008x2000

What use a mathematical formula to convert the size of the image, which
adjust it to a visible area on the screen?

--
Peter
Is not it obvious? All you have to do is to think about it...
1) Calculate scaling scaleRatio = MIN((scrHeight / imageHeight),
(scrWidth / imageWidth));
You will probably want to do following two steps ONLY when scaleRatio
< 1 i.e. image was too big, you will NOT want to show the image BIGGER
than the original because of loss of quality...
2) Calculate new image width = imageWidth * scaleRatio ;
3) Calculate new image height = imageHeight * scaleRatio ;
Sep 3 '08 #2

P: n/a
Peter May wrote:
Hi.

I know the dimensions area visible on the screen and I would like to
picture that there put dynamically, match its size to the window, while
retaining the proportions of course.

For example:

Screen area visible: 1280x589
The picture size: 3008x2000

What use a mathematical formula to convert the size of the image, which
adjust it to a visible area on the screen?
Is there a reason you can't just let the browser work it out for you?
Something like this for example:

<img width="100%" height="100%" border="0" src="path_to_your_img">

You may or may not want to put that inside a DIV that's sized to 100%,
like this:

<div style="width:100%;height:100%">
<img tag goes here>
</div>
As you resize the browser, the div and img would auto-resize with it.
Sep 3 '08 #3

P: n/a
GArlington pisze:
On Sep 3, 9:34 am, Peter May <peter....@poczta.fmwrote:
>Hi.

I know the dimensions area visible on the screen and I would like to
picture that there put dynamically, match its size to the window, while
retaining the proportions of course.

For example:

Screen area visible: 1280x589
The picture size: 3008x2000

What use a mathematical formula to convert the size of the image, which
adjust it to a visible area on the screen?

--
Peter

Is not it obvious? All you have to do is to think about it...
Not everything is obvious, such as it appears.
1) Calculate scaling scaleRatio = MIN((scrHeight / imageHeight),
(scrWidth / imageWidth));
You will probably want to do following two steps ONLY when scaleRatio
< 1 i.e. image was too big, you will NOT want to show the image BIGGER
than the original because of loss of quality...
2) Calculate new image width = imageWidth * scaleRatio ;
3) Calculate new image height = imageHeight * scaleRatio ;
After just missing me a simple mathematical formula. Such guidance. Your
solution is what i'm looking for. Thank you.

--
Peter
Sep 3 '08 #4

P: n/a
Stevo pisze:
Peter May wrote:
>Hi.

I know the dimensions area visible on the screen and I would like to
picture that there put dynamically, match its size to the window,
while retaining the proportions of course.

For example:

Screen area visible: 1280x589
The picture size: 3008x2000
What use a mathematical formula to convert the size of the image,
which adjust it to a visible area on the screen?

Is there a reason you can't just let the browser work it out for you?
Something like this for example:

<img width="100%" height="100%" border="0" src="path_to_your_img">

You may or may not want to put that inside a DIV that's sized to 100%,
like this:

<div style="width:100%;height:100%">
<img tag goes here>
</div>
As you resize the browser, the div and img would auto-resize with it.
Sure, that could use CSS. But you have to set the max-width: 100%,
max-height: 100%, while center <divvertically and horizontally. And
this happens in different ways.

--
Peter
Sep 3 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.