Changing a pics size according to resolution

[sorrowfulkiller]

I know I asked this awhile ago but I can't find the page I used it in now... nor can I find the thread I stated the question in.... I need a bit of script that will change the size of a picture according to resolution

[Khalid Ali]

something along these lines may work for you
Resource Here (http://www.webapplikations.com/pages/html_js/image_examples/ResizeImageOnResize.html)

[sorrowfulkiller]

Originally posted by Khalid Ali
something along these lines may work for you
Resource Here (http://www.webapplikations.com/pages/html_js/image_examples/ResizeImageOnResize.html)
Doesn't help.. I need something that works with the screen resolution.. not the window resolution

[steelersfan88]

<script type="text/javascript">

var screenH = screen.height
var screenW = screen.width

var newW = screenW / 5
var newH = screenH / 5

document.write('<img src="mypic.jpg" height='+ newH +' width='+ newW +' alt="my pic" id="pic">')

</script>This will write an image height and width 1/5 size of max screen height and width (which are often a tad more than actual resolution)

Of course, if the user changes resolution while viewing your page, there will be no change in size until page refreshed.

[sorrowfulkiller]

Originally posted by steelersfan88
<script type="text/javascript">

var screenH = screen.height
var screenW = screen.width

var newW = screenW / 5
var newH = screenH / 5

document.write('<img src="mypic.jpg" height='+ newH +' width='+ newW +' alt="my pic" id="pic">')

</script>This will write an image height and width 1/5 size of max screen height and width (which are often a tad more than actual resolution)

Of course, if the user changes resolution while viewing your page, there will be no change in size until page refreshed.
I need it so I can specify how big the picture while be at a certain resolution... >_<

[steelersfan88]

something like an array of screen heights and widths? Like:<script type="text/javascript">

var screenW = screen.width
var screenH = screen.height

var toWidth = -1
var toHeight = -1

var maxH = 600 // height/width if resolution is greater
var maxW = 600 // than those given in the array

/**************************************

* Change all height and widths here
* The screen is the possible height/width
of the screen
* The img is the height/width of the
image at that or a smaller resolution
* Keep all resolutions in ascending
order, smaller at top!

**************************************/

var heights = new Array
heights[0] = {screen:"600",img:"250"}
heights[1] = {screen:"768",img:"350"}
heights[2] = {screen:"864",img:"500"}

var widths = new Array
widths[0] = {screen:"800",img:"250"}
widths[1] = {screen:"1024",img:"350"}
widths[2] = {screen:"1152",img:"500"}

/*** DO NOT EDIT BELOW THIS LINE ***/

for(var i=0;i<widths.length;i++) {
if(screenW <= widths[i].screen) {
toWidth = i
break;
}
}

for(var i=0;i<heights.length;i++) {
if(screenH <= heights[i].screen) {
toHeight = i
break;
}
}

var picH = ""
var picW = ""

if(toHeight < 0) {
// picture bigger than given resolutions
picH = maxH
}
else {
picH = heights[toHeight].img
}

if(toWidth < 0) {
// picture bigger than given resolutions
picW = maxW
}
else {
picW = heights[toWidth].img
}

/*** DO NOT EDIT ABOVE THIS LINE ***/

// Change the src of the image and alt text only
document.write("<img src='myPic.jpg' alt='my pic' height="+ picH +" width="+ picW +">")

</script>The script can probably be condensed, i tried to comment somewhat and put a little bit of spacing to improve legibility.

[Khalid Ali]

Originally posted by sorrowfulkiller
Doesn't help..
in that I ma sure you are one of those who will not want to think at all and I am sure even what steelers posted the second time, that won't work for you...

The purpose here is usally to guide a member in a right direction,not to give 100 % customised solution for your problem( though I know that we all,volunteers here, if we have time,tend to do that).

Anyways I hope this latest by steelers help you.

[sorrowfulkiller]

Originally posted by steelersfan88
something like an array of screen heights and widths? Like:<script type="text/javascript">

var screenW = screen.width
var screenH = screen.height

var toWidth = -1
var toHeight = -1

var maxH = 600 // height/width if resolution is greater
var maxW = 600 // than those given in the array

/**************************************

* Change all height and widths here
* The screen is the possible height/width
of the screen
* The img is the height/width of the
image at that or a smaller resolution
* Keep all resolutions in ascending
order, smaller at top!

**************************************/

var heights = new Array
heights[0] = {screen:"600",img:"250"}
heights[1] = {screen:"768",img:"350"}
heights[2] = {screen:"864",img:"500"}

var widths = new Array
widths[0] = {screen:"800",img:"250"}
widths[1] = {screen:"1024",img:"350"}
widths[2] = {screen:"1152",img:"500"}

/*** DO NOT EDIT BELOW THIS LINE ***/

for(var i=0;i<widths.length;i++) {
if(screenW <= widths[i].screen) {
toWidth = i
break;
}
}

for(var i=0;i<heights.length;i++) {
if(screenH <= heights[i].screen) {
toHeight = i
break;
}
}

var picH = ""
var picW = ""

if(toHeight < 0) {
// picture bigger than given resolutions
picH = maxH
}
else {
picH = heights[toHeight].img
}

if(toWidth < 0) {
// picture bigger than given resolutions
picW = maxW
}
else {
picW = heights[toWidth].img
}

/*** DO NOT EDIT ABOVE THIS LINE ***/

// Change the src of the image and alt text only
document.write("<img src='myPic.jpg' alt='my pic' height="+ picH +" width="+ picW +">")

</script>The script can probably be condensed, i tried to comment somewhat and put a little bit of spacing to improve legibility.
Exactly what I was looking for, thanks...

btw Khalid Ali, I'm fairly new to javascript and I don't really know how I would've done something like this...

[Khalid Ali]

Originally posted by sorrowfulkiller

btw Khalid Ali, I'm fairly new to javascript
fair enough,pardon my little rant above,its that soe times there are people who will not want to learn rather try to get the complete solution..Glad you got your help here..:-)

[sorrowfulkiller]

Originally posted by Khalid Ali
fair enough,pardon my little rant above,its that soe times there are people who will not want to learn rather try to get the complete solution..Glad you got your help here..:-)
I know exactly what you mean... They don't want to learn it for themselves so they just ask people how to do it... it bugs the hell out of me... >_<

[steelersfan88]

glad that we can all make up, and that you have received what you needed, and to help out!