Image resizing depending on browser size

Discussion in 'Web Design and Development' started by Lau, Sep 20, 2007.

  1. Lau Guest

    #1
    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? :eek: Thanks for any help you can give. :)
     
  2. edesignuk Moderator emeritus

    edesignuk

    Joined:
    Mar 25, 2002
    Location:
    London, England
    #2
    Would setting the image width to 100% do the trick?
     
  3. Lau thread starter Guest

    #3
    Erm, yes, probably. :eek:

    Thanks. :D
     
  4. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #4
    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.
     
  5. Lau thread starter Guest

    #5
    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?
     
  6. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #6
    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.
     
  7. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #7
    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"
     
  8. Lau thread starter Guest

    #8
    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.
     
  9. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #9
    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.
     
  10. CanadaRAM macrumors G5

    CanadaRAM

    Joined:
    Oct 11, 2004
    Location:
    On the Left Coast - Victoria BC Canada
    #10
    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.
     
  11. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #11
    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

    PHP:
    <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> 
     
  12. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
  13. Lau thread starter Guest

    #13
    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. :)
     
  14. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #14
    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.
     
  15. Spanky Deluxe macrumors 601

    Spanky Deluxe

    Joined:
    Mar 17, 2005
    Location:
    London, UK
    #15
    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".
     
  16. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #16
    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.
     
  17. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #17
    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
     

Share This Page