Image resizing depending on browser size

[Lau]

Is there a way to treat images the same way you would treat a column with CSS?

For example, if you had a 3 column grid, in which there are two fixed width columns and then centre column that expands to fill the space of the browser, is there a way to do the same with the images in that centre column? So you would have 3 columns, with a centre column that fills the remainder of the browser window, and the images in that window then expand to fill that column?

Does that make sense? Thanks for any help you can give.

 

[edesignuk]

Would setting the image width to 100% do the trick?

 

[Lau]

Would setting the image width to 100% do the trick?

Erm, yes, probably.

Thanks.

 

[ChicoWeb]

That's completely the wrong way to do it.

I'm sure opening it on a 30 ACD would make that image great eh! I would use a combo of patterns and fixed widths to give it the appearance of liquid.

 

[Lau]

That's completely the wrong way to do it.

I'm sure opening it on a 30 ACD would make that image great eh! I would use a combo of patterns and fixed widths to give it the appearance of liquid.

Well, it was more to have large images, but to scale them down for smaller screens. So the images would be large by default (and wouldn't scale any larger than actual size), and look right on a large monitor, but just in case if someone then if someone had a small monitor it would scale them down.

What would be your "combo of patterns and fixed widths" solution?

 

[ChicoWeb]

So you're having all screen resolutions download a large file size image? Guess I'm not sure on your intent, but setting an image with a width using % is never a good idea. Yes a combo is what most designers use.

 

[Cabbit]

since php can pic up screen resolutions i think could you not doe something like this

$resolution = screenresulution-client

if $resolution > 1600px
echo "big image"
elseif $resolution > 1024px
echo "medium image"
else
echo "smallest image"

 

[Lau]

So you're having all screen resolutions download a large file size image? Guess I'm not sure on your intent, but setting an image with a width using % is never a good idea. Yes a combo is what most designers use.

Well, it's a very heavy image based site, and the designers are anxious to have large images that show off the work. I'm thinking from a usability point of view it would be better to have the image fit the browser if someone is on a smaller resolution and so not have to scroll, rather than someone still having to download the large images anyway and then having to scroll on top of that. The majority of users will be viewing this on a large screen, but I'd like to not alienate the few that will be viewing it on a smaller screen. The combo sounds good – would you be able to elaborate or point me to a useful link explaining this?

since php can pic up screen resolutions i think could you not doe something like this

$resolution = screenresulution-client

if $resolution > 1600px
echo "big image"
elseif $resolution > 1024px
echo "medium image"
else
echo "smallest image"

Thanks, that's really helpful and sounds like it would be worth looking into for this. I'll brush up on learn some php. It's something I'd been meaning to do for a while.

 

[Cabbit]

Well, it's a very heavy image based site, and the designers are anxious to have large images that show off the work. I'm thinking from a usability point of view it would be better to have the image fit the browser if someone is on a smaller resolution and so not have to scroll, rather than someone still having to download the large images anyway and then having to scroll on top of that. The majority of users will be viewing this on a large screen, but I'd like to not alienate the few that will be viewing it on a smaller screen. The combo sounds good – would you be able to elaborate or point me to a useful link explaining this?



Thanks, that's really helpful and sounds like it would be worth looking into for this. I'll brush up on learn some php. It's something I'd been meaning to do for a while.

lol please dont take me word for it i just seen php knows your res i think, i seen all these web satistic sites do it.

 

[CanadaRAM]

Lo-tek way is to offer the viewer a choice between large screen and small screen versions of the pages. You could then either send them to different HTML pages, or pass a variable to the scripting language of your choice to adjust the layout / imagefiles that load, as necessary.

 

[Cabbit]

http://dev.cossycomforts.com/get_resolution.php please visit this page, currently i got it to get the screen resolution. now its only using a if statment to work out the images sizes or to use a diffrent page out for diffrent style sheet.

updated, the site now shows a small image if your res is below 1024x768 or a bigger one if your above that, try changeing your res and refreshing the page and see if its what you want.



it works with cookies so you would have to clear the cookies before you change your screen res to before the image will change size.


more: okies you will only get the larger image if you use 1024x768 because of the x in it i cant do a >= just yet


edit. removed the x part and it now works on screen size to res is under 1024x768 you will get the smaller image else they get the bigger image. you must clear the cookie first im working on the expiary time of the cookie.

edit 2, now me happy with the code heres you go

<HTML> 
<TITLE>image siziers</TITLE> 
<HEAD> 
<? 
if(isset($HTTP_COOKIE_VARS["users_resolution"])) 
$screen_res = $HTTP_COOKIE_VARS["users_resolution"]; 
else //means cookie is not found set it using Javascript 
{ 
?> 
<script language="javascript"> 
<!-- 
writeCookie();

function writeCookie() 
{ 
var today = new Date(); 
var the_date = new Date("December 31, 2023"); 
var the_cookie_date = the_date.toGMTString(); 
var the_cookie = "users_resolution="+ screen.width +""+ screen.height; 
var the_cookie = the_cookie + ";expires=" + the_cookie_date; 
document.cookie=the_cookie 

location = 'get_resolution.php'; 
} 
//--> 
</script> 
<? 
} 
?> 
</HEAD> 
<BODY> 
<?php 
echo "Your screen resolution is set at ". $screen_res; 
echo "<br />";
//// sample 1 ////
if ($screen_res == '1280800') {
	echo "your proberly on a macbook";
}
else {
	echo "something else";
}
///// sample 2 ////
if ($screen_res >= "1024768") {
	echo "<br />";
	echo 'bigger image';
	echo "<br />";
	echo '<img src="old_jerry.jpg" alt="bigger" title="biggies image">';
}
else {
	echo "<br />";
	echo 'smaller image';
	echo "<br />";
	echo '<img src="old_jerry_small.jpg" alt="bigger" title="biggies image">';
}
?> 
</BODY> 
</HTML>

 

[Cabbit]

??? well dose that help anyone ???

 

[Lau]

Sorry, I just saw this now, babyjenniferLB. Thanks! That does seem to do the trick! Thanks for your help. I'll try building it into the site tomorrow and see how it looks. Thanks again for taking the time to help.

 

[Cabbit]

i thinks it only fails in that i needs to rely on a cookie, so if the user changes there screen res the cookie must be deleted.

 

[Spanky Deluxe]

It might be wiser to see if there's a way to do this in regards to browser window size rather than screen size. I've got a 30" ACD but I never have Safari windows open larger than roughly 1280x1024 (very roughly, I'm constantly moving them around).
I've always found that the general rule of "the larger the screen, the larger the windows used" breaks down with screens with resolutions above a certain level (lets say 1280x1024) and that people then tend to use the extra space for more windows instead of bigger windows.

While browsing the internet there's nothing that irritates me more (apart from sites that insist on making noise) than those sites that automatically maximise themselves to full screen. "How dare you take up all my screen space, I had other stuff open and you're not that important... close".

 

[Cabbit]

It might be wiser to see if there's a way to do this in regards to browser window size rather than screen size. I've got a 30" ACD but I never have Safari windows open larger than roughly 1280x1024 (very roughly, I'm constantly moving them around).
I've always found that the general rule of "the larger the screen, the larger the windows used" breaks down with screens with resolutions above a certain level (lets say 1280x1024) and that people then tend to use the extra space for more windows instead of bigger windows.

While browsing the internet there's nothing that irritates me more (apart from sites that insist on making noise) than those sites that automatically maximise themselves to full screen. "How dare you take up all my screen space, I had other stuff open and you're not that important... close".

I dont think there is a way to to detect the browser size and that is not a constant, what about if you press the plus button.

 

[Cabbit]

okies i think the script would work best for a hole style sheet like this

if res >= 19001200
biggest layout
elseif >= 1400900
middle layout
elseif >= 1280800
notebook layout
elseif >= 800600
compact layout
elseif >= 430400
pda layout
else
moble phone layout