faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

41 of 71 people (58%) answered Yes
Recently 7 of 10 people (70%) answered Yes

Entry

JavaScript: Picture: Screen: Resolution: How to keep size of picture proportional? [IMG / TABLE]

Apr 7th, 2008 23:31
ha mo, Knud van Eeden,


----------------------------------------------------------------------
--- Knud van Eeden --- 22 September 2003 - 06:35 - 06:45 pm ----------
JavaScript: Picture: Screen: Resolution: How to keep size of picture 
proportional? [IMG / TABLE]
Method: Use information about your current screen resolution: use
JavaScript system variables 'screen.height' and 'screen.width' and use
this in CSS stylesheet commands 'height' and 'width'.
Use the CSS stylesheet commands 'height', and 'width'.
Then use JavaScript 'screen.height', and 'screen.width' to get
your current screen resolution.
---
The idea is that your picture or table size will grow proportionally
(you are basically scaling the picture) with the given screen
resolutions.
So your picture will look similar in size, in either a screen
resolution of say:
 640 x 480
 800 x 600
1024 x 768
1200 x 800
1600 x 1200
...
===
Example:
Given that your screen resolution is currently 1024 x 768.
Then the 'screen.width' variable gives the horizontal screen resolution
(e.g. 1024).
---
Then the 'screen.height' variable gives the vertical screen resolution
(e.g. 768).
===
Example:
To let your picture (or table) size grow or decrease proportionally
with your given screen resolution use scaling.
 width = (same number) times ( horizontal screen resolution )
 height = (same number) times ( vertical screen resolution )
===
Example:
So if you are using a screen resolution of 1024 x 768 this becomes:
 width = (same number) times ( 1024 )
 height = (same number) times ( 786 )
---
For example to let your picture fill the whole screen (given that you
use as 1024x786 screen resolution), you could use:
 width = ( 1 ) times ( 1024 )
 height = ( 1 ) times ( 786 )
===
So, more general, independent of your screen resolution, in JavaScript
this becomes:
--- cut here: begin --------------------------------------------------
<SCRIPT>
  document.write( "<IMG" );
  document.write( '  SRC="yourpicturefilename.jpg"' );
  document.write( '  style=height:' + 1 * screen.height + "px" );
  document.write( '  style=width:' + 1 * screen.width + "px" );
  document.write( ">" );
</SCRIPT>
--- cut here: end ----------------------------------------------------
---
For example to let your picture fill the .935 of whole screen
vertically and horizontally, independent of the given screen
resolution, you could put in your HTML file:
--- cut here: begin --------------------------------------------------
<SCRIPT>
  document.write( "<IMG" );
  document.write( '  SRC="yourpicturefilename.jpg"' );
  document.write( '  style=height:' + 0.935 * screen.height + "px" );
  document.write( '  style=width:' + 0.935 * screen.width + "px" );
  document.write( ">" );
</SCRIPT>
--- cut here: end ----------------------------------------------------
---
For example to let your picture have the same proportion
of 250 pixels vertically and 250 pixels horizontally
(as started with in your 1200 x 800 screen resolution),
you could put in your HTML file:
--- cut here: begin --------------------------------------------------
<SCRIPT>
  document.write( "<IMG" );
  document.write( '  SRC="yourpicturefilename.jpg"' );
  document.write( '  style=height:' + ( screen.height / 800 ) * 250 
+ "px" );
  document.write( '  style=width:' + ( screen.width / 1200 ) * 250 
+ "px" );
  document.write( ">" );
</SCRIPT>
--- cut here: end ----------------------------------------------------
===
Thus if your screen resolution becomes 640 x 480, then you get thus
 ( 480 / 800 ) times 250 or thus the vertical width of 60% of the 
original.
 or thus
 ( 640 / 1200 ) times 250 or thus the horizontal width of 50% of the
 original.
===
Note:
Usually for the proportions to stay the same, both directions should
grow equally.
E.g. the horizontal side grows 2 times, then the vertical side should
also grow 2 times.
But here because of the vertical size grows different than the
horizontal size this might mean, some stretching in one direction. I
will have to test this.
---
So use the above instead of this (this are fixed, non changing sizes,
where the size of your picture stays the same, even if you change the
screen resolution)
--- cut here: begin --------------------------------------------------
<IMG
  HEIGHT="400"
  WIDTH="550"
  SRC="yourpicturefilename.jpg"
>
--- cut here: end ----------------------------------------------------
---
Or also instead of this (there the size also stays constant,
independent of the screen resolution):
--- cut here: begin --------------------------------------------------
<IMG
  style="height: 400px"
  style="width: 550px"
  SRC="yourpicturefilename.jpg"
>
--- cut here: end ----------------------------------------------------
---
So in your HTML file, replace every occurrence of '<IMG...' with that
piece of JavaScript.
===
Internet: see also:
The CSS stylesheet 'height' property:
http://www.devguru.com/Technologies/css/quickref/css_height.html
The CSS stylesheet 'width' property:
http://www.devguru.com/Technologies/css/quickref/css_width.html
The JavaScript 'screen' object:
http://www.devguru.com/Technologies/ecmascript/quickref/screen.html
----------------------------------------------------------------------
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com